﻿<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Frontend</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <link href="/resources/ui/ui.css" rel="stylesheet" />
  <link href="/resources/Doc/css/style.css" rel="stylesheet" />
  <link href="/resources/Doc/lib/responsive.css" rel="stylesheet" />
  <link href="/resources/Doc/resets/highlight/styles/github.css" rel="stylesheet" />
  <link rel="icon" href="/resources/favicon.ico" >
  <!--[if lt IE 9]><script src="/resources/Doc/lib/H5shiv.js"></script><![endif]-->
</head>
<body class="hasNav">
  <header>
   <h1>Frontend <small>前端开发框架</small></h1>
  </header>
   <nav class="wrap nav" id="nav">导航生成中...</nav>
   <section class="wrap" id="overall">
      <h2>关于</h2>
      <h3 id="overall-intro">概述</h3>
      <p> Frontend是面向展示型网站的前端开发框架，力图在不影响页面定制性的前提下提升前端开发效率，因此框架对css和js的封装也与一般“快速搭建”类框架有很大不同，css部分只包含少量必要css代码，自带UI只覆盖了表单、表格、按钮之类的基础元素，未来整个页面的样式大部分要开发者自己来写(WTF!)，css的缺失带来最大的定制自由度，但也让“框架”显得名不符实，其实背后还有一个配套的组件库（即将开源），作为框架的css超市，任意风格的组件都可以放进去，由组件库提供分类、检索、演示、调试和代码应用功能，可以很好的弥补框架的UI缺失，开发效率不弱于内置UI；相比css的轻薄，框架的js部分则要大的多，内置的模块库封装了大批js模块，但模块库不会在项目中整个加载，而是用 <a href="http://seajs.org/docs/" target="_blank">Seajs</a> 作为模块加载器按需加载，对于按需加载会增加http请求的问题，框架也内置了本地存储方案来解决。</p>
      <h4>目录结构</h4>
      <p>js模块化的加载方式约束了框架的目录结构，因此整站的前端部分被设计成框架包裹项目的结构，项目基于框架提供的js模块和UI独立开发，各项目互不干扰，内置的三个项目模板分别针对响应式/PC网站、移动端网站、微画册。（文档也是一个独立的项目）</p>
   <pre>
      <code class="javascript">    
  |--resources/             //框架目录
  |    |-- Doc/                //【文档】
  |    |-- modules/            //模块库
  |    |-- ui/                 //css、栅格、图标
  |    |-- phone/              //手机站【模板】
  |    |-- web/                //多终端网站【模板】
  |    |-- wei/                //微画册【模板】
  |    `-- favicon.ico 
  |--small/                //【相对路径的Frontend方案】
  |--test/                 //【测试数据】
        </code>
  </pre>
      <h4>开发环境</h4>
      <p>框架默认采用绝对路径，开发中需要配置服务器环境，以IIS为例，建立站点后需要填写名称、网站文件地址、端口号，并检查以下设置：</p>
      <ol>
         <li>开启目录浏览</li>
         <li>默认文档添加，如：index.htm（按需）</li>
         <li>MIME类型添加，常用：json=application/json, woff=application/x-font-woff,ejs=template/ejs</li>
         <li>设置http重定向，如：/resources/web/(按需)</li>
      </ol>

      <h4>开发规范</h4>
      <p>另见<a href="rule.htm" target="_blank">开发规范</a></p>
      <h3 id="CrossTerminal">多终端</h3>
     <p> 多终端网站开发除了css媒体查询以外，至少还要具备三项功能：流式栅格系统、终端识别，响应图片。</p>
     <p>栅格系统在<a href="#css-layout">【布局】</a>中有详细说明，终端识别是指js对设备的识别，响应图片是基于终端识别的功能封装。</p>
     <p> 多终端项目模板(web/)的实现方案是：responsive.css中定义了两个响应点以区分pc、pad、mobile三种设备，通过媒体查询“<code>@import</code>”各自的终端样式，同时给页面做不可见标记，js通过该标记判断设备类型，并提供通用识别方法，这种方式的优点是，css和js都可以由responsive.css中设置的响应点统一控制。</p>
     <p>多终端网站的样式分别写在三个文件中，style.css、Pad.css、Mobile.css，style.css是Pc版样式，在每个页面头部引用，pad.css和mobile.css是中屏样式和小屏样式，他们会由responsive.css根据设定的响应点适时引入，叠加在style.css上（mobile.css会叠加style.css 和 pad.css）。 </p>
     <p>responsive.css中的实现：</p>
     <pre>
       <code>
  /* import responsive stylesheet */
  @import url(./Pad.css) screen and (max-width: 1024px);
  @import url(./Mobile.css) screen and (max-width: 640px);
  ...
       </code>
     </pre>
     <p> 这种样式组织方式有两个弊端：一，采用pc优先原则而非响应式开发提倡的移动优先原则，会给移动端带来相对多的加载压力；二、每个版本一个独立样式文件通过@import载入相比单文件组织所有样式会增加两次请求。 </p>
     <p> 最终采用这种方式是考虑到：一、为保证框架的通用性，必须优先满足普通pc站的兼容性要求，因此只能pc优先，移动端的性能优化在<a href="#patch">【解决方案】</a>中有相应的功能实现；二、每个设备一个样式文件更易于开发，无须管理庞杂的多终端样式，还能简化配置，只要在responsive.css中配置一次，多版本样式加载、判断屏幕类型、图片响应都会通过这一次配置实现。 </p>
     <p>图片响应、设备识别等辅助方法都在<a href="#js-base">【js-base】</a>中有详细说明。</p>
      <h3 id="download">下载</h3>
      <p>Git@OSC：<a href="http://git.oschina.net/tower1229/frontend" target="_blank">http://git.oschina.net/tower1229/frontend</a></p>
      <p>点这里<a href="http://git.oschina.net/tower1229/frontend/repository/archive?ref=master" target="_self">直接下载</a></p>

   </section>
   <section class="wrap" id="css">
     <h2>CSS</h2>
     <h3 id="css-ui">基础</h3>
     <p>基础css部分包括样式重置和工具类两部分，多来自项目经验积累，样式重置没有使用Normalize.css是因为Normalize.css理念太过“平和”，只统一了浏览器差异，保留了过多默认样式，在高度定制化的项目中并不适用；工具类目前也只有很少的几个，一是因为在高频修改的项目中真正的“通用类”本来就很少，一不小心就会成为冗余，二是框架css并没有全局命名空间，工具类多了之后在开发中类名冲突的几率增大，也容易造成记忆负担。</p>
     <p>注：微画册项目完全有自己的一套UI，它只使用框架提供的js模块。</p>
     <h4>样式重置</h4>
     <p>样式重置结合了Pc端、移动端、响应式网站的综合需求，因此在通常的去默认样式的基础上，又额外做了一些事情，包括但不限于：</p>
     <ol>
       <li>去掉触屏点击链接的背景色；</li>
       <li>全局设置图片最大宽度100%，这在开发中会造成的常见问题是图片类效果插件显示异常，或百度地图这类自带图片资源的第三方插件显示异常；</li>
       <li>对a标签添加0.3s的过渡动画；</li>
     </ol>
     <h4>工具类</h4>
     <table class="table table-hover table-condensed">
      <tr>
        <td>.fix</td>
        <td>清除浮动（撑起浮动）</td>
      </tr>
      <tr>
        <td>.oh</td>
        <td>超出隐藏，同时有清浮动的作用</td>
      </tr>
      <tr>
        <td>.l / .r</td>
        <td>左 / 右浮动</td>
      </tr>
      <tr>
        <td>.dib</td>
        <td>使元素呈现为inline-block</td>
      </tr>
      <tr>
        <td>.pr / .pa</td>
        <td>相 / 绝对定位</td>
      </tr>
      <tr>
        <td>.tc / .tr</td>
        <td>居中对齐 / 居右对齐</td>
      </tr>
      <tr>
        <td>.el</td>
        <td>文字单行显示超出显示为省略号（...）</td>
      </tr>
      <tr>
        <td>.hide</td>
        <td>隐藏元素</td>
      </tr>
      <tr>
        <td>.hidetext</td>
        <td>隐藏元素内的文字</td>
      </tr>
      <tr>
        <td>.arr</td>
        <td>border绘图的基础类，实现了一个宽高为0的inline-block元素</td>
      </tr>
     </table>
     <h4>基础设置</h4>
     <p>有些基础样式仍然需要根据设计风格做进一步设置，例如字体字号等，为方便开发，在web/style.css 中暴露了一些基础元素：</p>
     <table class="table table-hover table-condensed">
      <tr>
        <td>body</td>
        <td>用来设置字号、文字颜色、body背景色、全局行高等</td>
      </tr>
      <tr>
        <td>.wrap</td>
        <td>通用布局类，用于设置主体宽度</td>
      </tr>
      <tr>
        <td>a</td>
        <td>用于设置链接颜色</td>
      </tr>
      <tr>
        <td>a:hover（web独有）</td>
        <td>用于设置链接悬浮颜色</td>
      </tr>
      <tr>
        <td>css组件（web独有）</td>
        <td>目前可以设置全局圆角大小、表单焦点状态</td>
      </tr>
      <tr>
        <td>选中设置（web独有）</td>
        <td>用于设置全局选中文字的背景和颜色</td>
      </tr>
    </table>

     <h3 id="css-layout">布局</h3>
     <h4>流式布局</h4>
     <p>样式设置中的.wrap类是框架通用的流体布局类，在响应式/PC项目中其默认最大宽度1000px，在移动项目中默认自适应宽度，左右两边各有2%的padding</p>

     <h4>栅格系统</h4>
     <p>兼容IE7+的响应式栅格系统，栅格外层类名.row，pc端栅格类名.span-number，中屏栅格类名.midd-number，小屏栅格类名.smal-number，内置12列、24列、12和20混合三套栅格</p>
     <p>使用grid12_20.css时.row是12列，.row-20是20列，20列栅格的工具类都需要加-20后缀，如enter-20</p>
     <p>基于栅格系统的【<a href="http://192.168.0.10:1003/" target="_blank">可视化布局工具</a>】</p>
     <p>示例使用的是16列 - -</p>
     <h5>基础栅格</h5>
     <div class="demo">
        <div class="row">
           <div class="span-4"></div>
           <div class="span-8"></div>
           <div class="span-4"></div>
        </div>
     </div>
     <pre>
        <code>
           &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;span-4&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;span-8&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;span-4&quot;&gt;&lt;/div&gt;
           &lt;/div&gt;
        </code>
      </pre>

     <h5>响应式栅格</h5>
     <div class="demo">
        <div class="row">
           <div class="span-4 midd-8 smal-16"></div>
           <div class="span-8 midd-8 smal-16"></div>
           <div class="span-4 midd-16 smal-16"></div>
        </div>
     </div>
     <pre>
        <code>
           &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;span-8 midd-8 smal-16&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;span-4 midd-16 smal-16&quot;&gt;&lt;/div&gt;
           &lt;/div&gt;
        </code>
    </pre>
   
     <h5>无间距模式</h5>
     <div class="demo">
        <div class="full-row">
           <div class="span-4 midd-8 smal-16">无间距模式</div>
           <div class="span-8 midd-8 smal-16" style="background:grey;color:#fff;">无间距模式</div>
           <div class="span-4 midd-16 smal-16">无间距模式</div>
        </div>
     </div>
     <pre>
        <code>
           &lt;div class=&quot;full-row&quot;&gt;
              &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;无间距模式&lt;/div&gt;
              &lt;div class=&quot;span-8 midd-8 smal-16&quot; style="background:grey;color:#fff;"&gt;无间距模式&lt;/div&gt;
              &lt;div class=&quot;span-4 midd-16 smal-16&quot;&gt;无间距模式&lt;/div&gt;
           &lt;/div&gt;
        </code>
    </pre>
     <h5>栅格辅助工具</h5>
     <div class="demo">
        <div class="row">
           <div class="span-8 center">
              <p>block1</p>
           居中 </div>
        </div>
        <div class="row">
           <div class="span-12 pull-right smal-16">
              <p>block1</p>
           置右 </div>
           <div class="span-4 smal-16">
              <p>block2</p>
           </div>
        </div>
        <div class="row">
           <div class="span-8 pull-right-4 smal-16">
              <p>block1</p>
           右位移 </div>
           <div class="span-4 pull-left-8 smal-16">
              <p>block2</p>
           左位移 </div>
           <div class="span-4 smal-16">
              <p>block3</p>
           </div>
        </div>
        <div class="row">
           <div class="span-8 smal-16">
              <p>block1</p>
           </div>
           <div class="span-4 smal-16 midd-hide smal-show">
              <p>block2</p>
           中屏隐藏，小屏显示 </div>
           <div class="span-4 smal-16 smal-hide">
              <p>block3</p>
           小屏隐藏 </div>
        </div>
     </div>
     <pre>
        <code>
        &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;span-8 center&quot;&gt;&lt;p&gt;block1&lt;/p&gt;居中&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;span-12 pull-right smal-16&quot;&gt;&lt;p&gt;block1&lt;/p&gt;置右&lt;/div&gt;
           &lt;div class=&quot;span-4 smal-16&quot;&gt;&lt;p&gt;block2&lt;/p&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;span-8 pull-right-4 smal-16&quot;&gt;&lt;p&gt;block1&lt;/p&gt;右位移&lt;/div&gt;
           &lt;div class=&quot;span-4 pull-left-8 smal-16&quot;&gt;&lt;p&gt;block2&lt;/p&gt;左位移&lt;/div&gt;
           &lt;div class=&quot;span-4 smal-16&quot;&gt;&lt;p&gt;block3&lt;/p&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;span-8 smal-16&quot;&gt;&lt;p&gt;block1&lt;/p&gt;&lt;/div&gt;
           &lt;div class=&quot;span-4 smal-16 midd-hide smal-show&quot;&gt;&lt;p&gt;block2&lt;/p&gt;中屏隐藏，小屏显示&lt;/div&gt;
           &lt;div class=&quot;span-4 smal-16 smal-hide&quot;&gt;&lt;p&gt;block3&lt;/p&gt;小屏隐藏&lt;/div&gt;
        &lt;/div&gt;
        </code>
  </pre>
   <p>工具列表：</p>
   <table class="table table-hover">
      <tr>
         <td>.center</td>
         <td>居中,居中的栅格将成为块级元素占据整行，不能多列栅格共存</td>
      </tr>
      <tr>
         <td>.midd-center</td>
         <td>中屏居中</td>
      </tr>
      <tr>
         <td>.smal-center</td>
         <td>小屏居中</td>
      </tr>
      <tr>
         <td>.hide</td>
         <td>大屏隐藏</td>
      </tr>
      <tr>
         <td>.midd-hide</td>
         <td>中屏隐藏</td>
      </tr>
      <tr>
         <td>.smal-hide</td>
         <td>小屏隐藏</td>
      </tr>
      <tr>
         <td>.smal-show</td>
         <td>小屏显示，用于显示中屏隐藏的元素</td>
      </tr>
      <tr>
         <td>.pull-right</td>
         <td>置右，置右和位移工具的设计使用场景是，在非小屏下调整dom顺序，以在小屏下全宽显示时有正确的前后(上下)关系</td>
      </tr>
      <tr>
         <td>.pull-left-1</td>
         <td> 左位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-left-2</td>
         <td> 左位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-left-3</td>
         <td> 左位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
      <tr>
         <td>.pull-right-1</td>
         <td> 右位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-right-2</td>
         <td> 右位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-right-3</td>
         <td> 右位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
   </table>
   <h5>栅格嵌套</h5>
   <p>嵌套栅格也需要带row或full-row层，支持无限嵌套。</p>
   <pre>
     <code>
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;span-4&quot;&gt;
      side
    &lt;/div&gt;
    &lt;div class=&quot;span-8&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span-9&quot;&gt;
          main
        &lt;/div&gt;
        &lt;div class=&quot;span-3&quot;&gt;
          sub
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
     </code>
   </pre>
   <h5>基于less配置</h5>
   <p> grid.less位于grid/下，配置网格总数和间距将生成不同的栅格，最多支持24列；配置临界尺寸将影响Pad.css和Mobile.css加载的时机，该值也是getType()方法返回值的依据，如下： </p>
   <table class="table table-hover">
      <tr>
         <td>@gridColumns</td>
         <td>栅格列数,正整数，默认16</td>
      </tr>
      <tr>
         <td>@gridGutterWidth</td>
         <td>栅格间距，表示百分比的小数，默认0.02，表示2%</td>
      </tr>
      <tr>
         <td>@PadScreen</td>
         <td>中屏临界宽度，css宽度，默认768px</td>
      </tr>
      <tr>
         <td>@MobileScreen</td>
         <td>小屏临界宽度，css宽度，默认480px</td>
      </tr>
   </table>

   <h4>flex栅格</h4>
   <p>"phone/style.css" 中内置flex栅格，沿用流式栅格系统的命名风格，解决flex三代规范演变带来的兼容问题。</p>
   <table class="table table-hover">
      <tr>
         <td>.flex-col</td>
         <td>定义一个纵向flex容器。</td>
      </tr>
      <tr>
         <td>.flex-row</td>
         <td>定义一个横向flex容器。</td>
      </tr>
      <tr>
         <td>.flex-1， <br/>.flex-2， <br/>.flex-3， <br/>.flex-4</td>
         <td>定义flex盒子的主轴尺寸占比。<br/>即，在纵向容器中控制高度，在横向容器中控制宽度，flex-n中的n代表的是，n/{(flex-n1)+(flex-n2)+...}。</td>
      </tr>
      <tr>
         <td>.align-stretch</td>
         <td>flex盒子在侧轴方向伸展。</td>
      </tr>
      <tr>
         <td>.align-center</td>
         <td>flex盒子在侧轴方向居中对齐。</td>
      </tr>
      <tr>
         <td>.justify-center</td>
         <td>flex盒子在主轴方向居中对齐。</td>
      </tr>
      <tr>
         <td>.flex-wrap</td>
         <td>允许flex盒子换行显示，默认不换行。</td>
      </tr>
      <tr>
         <td>.scroll_cont</td>
         <td>带滚动条区域</td>
      </tr>
   </table>
   <p>预览：</p>
   <div class="flex-col" style="height:480px;width:320px;">
      <div class="header flex-1" style="background:orange;color:#fff;">
         头部
      </div>
      <div class="body flex-4" style="background:#FFF6E5;">
         内容
      </div>
      <div class="foot flex-1" style="background:grey;color:#fff;">
         底部
      </div>
   </div>
   <p>代码：</p>
   <pre>
      <code>
  &lt;div class=&quot;flex-col&quot; style=&quot;height:480px;width:320px;&quot;&gt;
  &lt;div class=&quot;header flex-1&quot; style=&quot;background:orange;color:#fff;&quot;&gt;
  头部
  &lt;/div&gt;
  &lt;div class=&quot;body flex-4&quot; style=&quot;background:#FFF6E5;&quot;&gt;
  内容
  &lt;/div&gt;
  &lt;div class=&quot;foot flex-1&quot; style=&quot;background:grey;color:#fff;&quot;&gt;
  底部
  &lt;/div&gt;
  &lt;/div&gt;
         </code>
    </pre>

    <h3 id="css-icon">图标</h3>
    <h4>使用</h4>
    <p>UI自带图标基于开源图标<a href="http://ionicons.com/" target="_blank">ionicons</a>创建，图标类名改为"<code>.ion</code>"，为兼容IE7去掉了FontClass支持，只能用Unicode定义图标，如：</p>
    <pre>
      <code>
  <i class="ion">&#xe64b;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe64b;&lt;/i&gt;
  <i class="ion">&#xe72a;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe72a;&lt;/i&gt;
  <i class="ion">&#xe733;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe733;&lt;/i&gt;
      </code>
    </pre>
    <h4>图标库</h4>
    <p>为方便图标应用而创建的<a href="http://icons.oschina.mopaas.com/" target="_blank">图标库</a>项目，提供图标检索、获取Unicode、PNG定制、PNG下载功能</p>
    <p>面向设计师的PNG定制功能，可以实现图标大小和颜色调节，并在线生成PNG图片下载（不支持IE）</p>
    <p>大部分功能都集成在图标右键菜单中，单击图标也可以快速选中图标Unicode，按“<code>Ctrl + C</code>”即可复制</p>
    <h4>图标管理</h4>
    <p>借助<a href="http://www.iconfont.cn/" target="_blank">阿里巴巴矢量图标库</a>管理图标，实现图标应用项目的增删改，并获取打包后的图标字体及Unicode</p>
    <h3 id="css-widget">组件</h3>
    <p>...</p>

    <h4>css3动画</h4>
    <p> <b>.rotation</b> 旋转，示例见【普通风格-同步】</p>
    <p> <b>.heartbeat</b> 心跳，示例见【普通风格-心】</p>
    <p> <b>.trigger</b> 触动，示例见【普通风格-关闭】</p>
    <h4>等比填充</h4>
    <p>...</p>
    <h4>表格</h4>
    <p>...</p>
    <h4>表单</h4>
    <p>...</p>
    <h4>按钮</h4>
    <p>...</p>
    
   </section>
   <section class="wrap" id="js">
      <h2>Javascript</h2>
      <h3 id="js-seajs">Js三层结构</h3>
      <p>通常网站Js脚本可以分为 <strong>base</strong> + <strong>module</strong> + <strong>app</strong> 三层，</p>
      <p>base是下层基础，提供更易用的语法和工具来简化开发，框架以jquery为基础库，另外增加了base.js提供jquery不具备的功能，jquery和base都放在modules/；</p>
      <p>module是对特定功能的封装，如轮显效果、视频播放器，日期选择器，表单验证器等等，modules/里除了jquery、base和seajs以外，几乎全部都是已经封装的模块文件，涵盖了绝大部分建站常用效果；</p>
      <p>app是基于base和modules实现的上层建筑，每个页面都有一个独立的js文件放在app/中，相当于以页面模板为单位进行业务分离，便于后期维护，app/里通常还有一个common.js用于管理通用代码。</p>
      <p>这三部分代码中base和module在展示型网站中是非常类似的，因此框架重点封装这两层，使开发者能基于这些封装快速、简单的实现自己的app层代码，关于模块化开发的其他资料可以参考：</p>
      <p> <a href="https://github.com/seajs/seajs/issues/547" target="_blank">前端模块化开发的价值</a> <a href="https://github.com/seajs/seajs/issues/266" target="_blank">SeajsAPI快速参考</a> </p>
      <h3 id="js-app">app</h3>
      <h4>为模板增加一个Js入口</h4>
      <p>seajs.use可以指定要启动的js文件，如首页底部的：</p>
      <pre>
        <code>
  seajs.use('app/index')
        </code>
      </pre>
      <p>这样首页模板就将执行app/index.js，首页里的所有js效果都要在这里实现。</p>
      <h4>如何使用模块</h4>
      <p>要在页面里使用模块实现特定功能，就要先在页面的js里引用模块，引用模块的语法是require(‘模块路径’)，或者用异步加载的方式require.async(‘模块路径’，‘回调’)。</p>
      <p>以index.js为例：</p>
   <pre>
   <code>
  /*
   * index.js
   */
  define(function(require, exports, module) {
     var $ = require('jquery');
     var base=require('base');
     var com = require('./common');
     //...
     
  })
      </code>
</pre>
      <p>index.js里分别引用了jquery，base和common，并将他们的返回值分别赋值给'$','base'和'com'。</p>
      <p>赋值的变量名可以自定义，因此也可以写成 </p>
      <pre>
        <code>
  var lalala = require('jquery'); 
  lalala('body').append('hello'); //'hello'
        </code>
      </pre>

      <p>并不是所有的模块都有返回值，例如common模块多数时候只是存放网站通用代码，导航栏、返回顶部、分享代码之类，很少对外提供方法，如果确定一个模块不需要任何返回值也可以只引用不赋值，例如 require('./common')，大多数jquery插件模块也都没有返回值，因为jquery插件方法都扩展在jquery对象上，可以直接通过$.methodname的方式使用。</p>
   
      <h4>异步加载</h4>
      <p>另一种加载方式require.async是异步加载，异步加载的模块不会提前就位，而是当需要用到时才开始请求模块文件，对于jquery和common这种被其他代码强依赖的模块我们希望尽快加载生效，因此使用同步加载，对于大多数效果类模块则应适度使用异步加载，以提高页面性能，但第一屏内的效果（banner...）应使用同步加载，以提高首屏响应速度。</p>
      <p>require.async回来的模块只能在本次请求的回调函数中使用，如果模块有返回值该回调函数将接受该值为参数，以百度分享模块为例，异步请求后回调函数中接收了该模块返回的百度分享方法，并自定义名称为bdshare，然后在函数体内使用bdshare方法： </p>
   <pre>
      <code>
   //百度分享 
   require.async('bdshare',function(bdshare){
      bdshare({
         bdSize : 16
      });
   });
      </code>
</pre>
  <h4 id="js-base-common">公用代码common.js</h4>
    <p>common.js内置了网站常用代码，可以根据需求保留或删除:</p>
   <table class="table table-bordered">
      <tr>
         <td>返回顶部</td>
         <td>
            对$('.gotop')添加点击返回顶部事件
         </td>
      </tr>
      <tr>
         <td>关闭当前页</td>
         <td>
            对$('.closewin')绑定点击关闭当前页事件
         </td>
      </tr>
      <tr>
         <td>打印当前页</td>
         <td>
            对$('.print')绑定打印当前页事件
         </td>
      </tr>
      <tr>
         <td>加入收藏</td>
         <td>
            对$('.favorite')绑定点击将当前页加入收藏夹事件(仅IE)
         </td>
      </tr>
      <tr>
         <td>设为首页</td>
         <td>
            对$('.sethome')绑定点击将当前页设为首页事件(仅IE)
         </td>
      </tr>
      <tr>
         <td>扩展input:placeholder</td>
         <td>
            <p>对不支持H5 placeholder的浏览器扩展placeholder属性：</p>
            <pre>
            <code>
  &lt;input type=&quot;text&quot; placeholder=&quot;搜索&quot; &gt;
               </code>
</pre>
         </td>
      </tr>
      <tr>
         <td>扩展textarea:max-length</td>
         <td>
            <p>对textarea标签扩展max-length属性，用于限制最大输入字符数：</p>
            <pre>
            <code>
  &lt;textarea max-length='200'&gt;text here...&lt;/textarea&gt;
               </code>
</pre>
         </td>
      </tr>
      
   </table>
      <h3 id="js-module">module</h3>
      <p> module封装了大量js模块，模块封装相关文档见 <a href="https://github.com/seajs/seajs/issues/242" target="_blank">CMD模块定义规范</a>。 </p>
      <h4>模块目录</h4>
   <nav id="modules_index"></nav>

   <h4>使用示例</h4>
   <table class="table table-bordered" id="modules_list">
      <tr id="Audio（跨平台音频播放）">
         <td>audio</td>
         <td>
            <h5>描述</h5>
            <p>跨平台音频播放器，详见<a href="http://kolber.github.io/audiojs/" target="_blank">官网</a></p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <p>无</p>
            <h5>示例</h5>
        
         <pre>
            <code>
  &lt;!--html--&gt;
  &lt;audio preload=&quot;auto&quot; &gt;
     &lt;source src=&quot;http://bcs.duapp.com/images-link/ghsy.mp3&quot; /&gt;
  &lt;/audio&gt;
  </code>
</pre>
        <pre>
                <code>
  //js
  require('audio');
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
            </code>
</pre>
         </td>
      </tr>
      <tr id="Album（相册）">
      <td>album</td>
         <td>
            <h5>描述</h5>
            <p>相册插件，依赖幻灯片模块(slide.js)。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>blankclose</th>
                <td>默认false，点空白关闭</td>
              </tr>
              <tr>
                <th>title</th>
                <td>默认null，匹配的元素文字将作为标题显示</td>
              </tr>
              <tr>
                <th>cell</th>
                <td>默认'li'，相册展示的元素</td>
              </tr>
              <tr>
                <th>trigger</th>
                <td>默认等于cell，触发相册的元素，可传入cell的子元素选择器</td>
              </tr>
              <tr>
                <th>type</th>
                <td>皮肤，可选 1:普通 |  2:前后缩略图 | 3:所有缩略图</td>
              </tr>
              <tr>
                <th>hook</th>
                <td>默认空字符串，用于附加自定义样式</td>
              </tr>
              <tr>
                <th>effect</th>
                <td>切换效果，可选 slide | fade | toggle</td>
              </tr>
              <tr>
                <th>animate</th>
                <td>动画曲线，默认“swing”</td>
              </tr>
              <tr>
                <th>duration</th>
                <td>效果时长，单位ms，默认480</td>
              </tr>
              <tr>
                <th>prevHtml</th>
                <td>默认'<i class="ion">&#xe6c3;</i>'，左箭头html</td>
              </tr>
              <tr>
                <th>nextHtml</th>
                <td>默认'<i class="ion">&#xe6c4;</i>'，右箭头html</td>
              </tr>
              <tr>
                <th>imgattr</th>
                <td>默认无，存放展示图片地址的img属性，注意不能是‘data-src’</td>
              </tr>
              <tr>
                <th>callback</th>
                <td>回调，参数同slide.js</td>
              </tr>
              <tr>
                <th>ext</th>
                <td>扩展，参数同slide.js</td>
              </tr>
            </table>
            <h5>示例</h5>
            <pre>
            <code>
  &lt;style&gt;
  .demo{overflow: hidden;padding:1em;}
  .demo li{float: left;width: 240px;height: 150px;overflow: hidden;margin:0 .5em;}
  &lt;/style&gt;
  &lt;div class=&quot;demo&quot;&gt;
      &lt;ul&gt;
          &lt;li class=&quot;show&quot;&gt;
              &lt;img src=&quot;http://temp.im/640x320/?1&quot; &gt;
              &lt;div class=&quot;_title&quot;&gt;1这行字会成为标题&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;show&quot;&gt;
              &lt;img src=&quot;http://temp.im/640x320/?1&quot; &gt;
              &lt;div class=&quot;_title&quot;&gt;2这行字会成为标题&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;show&quot;&gt;
              &lt;img src=&quot;http://temp.im/640x320/?3&quot; &gt;
              &lt;div class=&quot;_title&quot;&gt;3这行字会成为标题&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;show&quot;&gt;
              &lt;img src=&quot;http://temp.im/640x320/?4&quot; &gt;
              &lt;div class=&quot;_title&quot;&gt;4这行字会成为标题&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src=&quot;http://temp.im/640x320/?5&quot; &gt;
              &lt;div class=&quot;_title&quot;&gt;这个li不会在相册中显示&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
        </code>
      </pre>
        <pre>
                <code>
  require.async('album',function(){
     $('.demo').album({
        title: '._title',
        cell: '.show'
     })
  })
                </code>
          </pre>
            
         </td>
      </tr>
      <tr id="Copy（复制）">
        <td>Copy</td>
        <td>
          <h5>描述</h5>
          <p>复制文字到剪贴板，详细参数见<a href="http://www.steamdev.com/zclip/" target="_blank">官网</a></p>
          <h5>多终端</h5>
          <p>不支持</p>
          <h5>示例</h5>
          <pre>
            <code>
  &lt;div id=&quot;d_clip_button&quot;&gt;复制&lt;/div&gt;
            </code>
          </pre>
          <pre>
            <code>
  require('copy');

  $('#d_clip_button').zclip({
    copy: "测试" + Math.random(),
    afterCopy:function(){
      console.log('复制成功');
    }
  });
            </code>
          </pre>
        </td>
      </tr>
      <tr id="Flv(flv/swf播放器)">
         <td>flv</td>
         <td>
            <h5>描述</h5>
            <p>集成vcastr3.0视频播放器，传入视频地址，返回播放器html，支持格式：.swf/.flv</p>
            <h5>多终端</h5>
            <p>不支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>src</th>
                <td>视频地址</td>
              </tr>
              <tr>
                <th>width</th>
                <td>宽,默认480</td>
              </tr>
              <tr>
                <th>height</th>
                <td>高,默认320</td>
              </tr>
              <tr>
                <th>auto</th>
                <td>默认false，自动播放</td>
              </tr>
              <tr>
                <th>ctrl</th>
                <td>默认true，是否有播放控件</td>
              </tr>
              <tr>
              <tr>
                <th>loop</th>
                <td>默认false，是否循环播放</td>
              </tr>
              <tr>
                <th>logo</th>
                <td>Logo处显示的文字</td>
              </tr>
              <tr>
                <th>id</th>
                <td>给embed标签添加id，默认无</td>
              </tr>
            </table>
            <h5>示例</h5>
            <pre>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;playarea2&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;playarea3&quot;&gt;&lt;/div&gt;
            </code>
            </pre>
            <pre>
               <code>
  //js
  var player=require('flv');

  var player_2 = player({
     src: 'http://bcs.duapp.com/images-link/sample.flv',
     loop:true
  });
  var player_3 = player({
     src:'http://player.youku.com/player.php/sid/XOTIwMDA5Nzk2/v.swf'
  });

  //将播放器插入页面
  $('.playarea2').html(player_2);
  $('.playarea3').html(player_3);
                  </code>
            </pre>
         </td>
      </tr>
      <tr id="Hook（下拉刷新）">
         <td>hook</td>
         <td>
            <h5>描述</h5>
            <p>页面下拉刷新效果</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>reloadPage</th>
                <td>下拉后刷新，默认true，将不执行回调</td>
              </tr>
              <tr>
                <th>swipeDistance</th>
                <td>触发距离，默认50，单位px</td>
              </tr>
              <tr>
                <th>reloadEl</th>
                <td>下拉后回调</td>
              </tr>
            </table>
            <h5>示例</h5>
         <pre>
         <code>
  &lt;!--html--&gt;
  &lt;div&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt; 滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;滚动内容&lt;br/&gt;
     滚动内容&lt;br/&gt;
  &lt;/div&gt;         
 </code>
</pre>
      <pre>
         <code>
  //js
  require.async('hook',function(hook){
    hook()
  });
            </code>
</pre>
         </td>
      </tr>
      <tr id="Datepicker（日期选择器）">
         <td>datepicker</td>
         <td>
            <h5>描述</h5>
            <p>日期选择器，返回日期选择器方法：详细文档见：<a href="http://www.my97.net/dp/demo/index.htm" target="_blank">官网</a></p>
            <h5>多终端</h5>
            <p>支持，样式待美化</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>skin</th>
                <td>皮肤，默认'whyGreen'</td>
              </tr>
              <tr>
                <th>dateFmt</th>
                <td>自定义输出格式，例如'yyyy年MM月dd日 HH时mm分ss秒'</td>
              </tr>
            </table>
            <h5>示例</h5>
            <pre>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;wrap&quot;&gt;
    &lt;p&gt;1.点选日期选择器 &lt;/p&gt;
    &lt;input id=&quot;birthday&quot; type=&quot;text&quot;&gt;

    &lt;p&gt;2.平面日期选择器 &lt;/p&gt;
    &lt;div id=&quot;calendar&quot;&gt; &lt;/div&gt;
  &lt;/div&gt;
              </code>
            </pre>
            <pre>
            <code>
  //js
  var datepicker=require('datepicker');
  $('#birthday').on('click',function(){
     datepicker();
  });

  //静态日历
  datepicker({
    lang:'en',
    eCont:'calendar',               //日历容器id
    onpicked:function(date){        //点选回调
      alert('你选择的日期是:'+date.cal.getDateStr())
    }})
            </code>
</pre>
         </td>
      </tr>
      <tr id="Raty（评分）">
        <td>raty</td>
        <td>
          <h5>描述</h5>
          <p>评分插件，来自https://github.com/wbotelhos/raty</p>
          <h5>多终端</h5>
          <p>支持</p>
          <h5>配置</h5>
          <table class="table table-hover">
              <tr>
                <td>
                  cancel：
                </td>
                <td>
                  默认false，创建一个取消按钮；
                </td>
              </tr>
              <tr>
                <td>
                  cancelPlace：
                </td>
                <td>
                  默认'left'，取消按钮的位置
                </td>
              </tr>
              <tr>
                <td>
                  click：
                </td>
                <td>
                  默认undefind，点击回调
                </td>
              </tr>
              <tr>
                <td>
                  half：
                </td>
                <td>
                  默认false，允许半星
                </td>
              </tr>
              <tr>
                <td>
                  hints:
                </td>
                <td>
                  默认 ['bad', 'poor', 'regular', 'good', 'gorgeous']，每颗星星对应的提示
                </td>
              </tr>
              <tr>
                <td>
                  mouseout：
                </td>
                <td>
                  默认undefind，mouseout回调
                </td>
              </tr>
              <tr>
                <td>
                  mouseover：
                </td>
                <td>
                  默认undefind，mouseover回调
                </td>
              </tr>
              <tr>
                <td>
                  number：
                </td>
                <td>
                  默认5，评分的总星数
                </td>
              </tr>
              <tr>
                <td>
                  precision：
                </td>
                <td>
                  默认false，允许选择一个更精确的分数
                </td>
              </tr>
              <tr>
                <td>
                  readOnly：
                </td>
                <td>
                  默认false，让评分不可更改
                </td>
              </tr>
              <tr>
                <td>
                  score：
                </td>
                <td>
                  默认undefind，初始分数
                </td>
              </tr>
              <tr>
                <td>
                  scoreName：
                </td>
                <td>
                  默认'score'，评分插件会创建一个隐藏域存储分数，该项定义隐藏域的name
                </td>
              </tr>
              <tr>
                <td>
                  single：
                </td>
                <td>
                  默认false，评分时只有当前那颗星被点亮
                </td>
              </tr>
              <tr>
                <td>
                  space：
                </td>
                <td>
                  默认true，星星之间是否有间距
                </td>
              </tr>
              <tr>
                <td>
                  target：
                </td>
                <td>
                  默认undefind，评分将被显示在该元素中
                </td>
              </tr>
              <tr>
                <td>
                  targetFormat：
                </td>
                <td>
                  默认'{score}'，输出到target的格式模板
                </td>
              </tr>
              <tr>
                <td>
                  targetKeep：
                </td>
                <td>
                  默认false，当鼠标离开星星时target中的分数是否保留
                </td>
              </tr>
              <tr>
                <td>
                  targetScore：
                </td>
                <td>
                  默认undefind，用来存储分数的input选择器，插件将不再生成默认隐藏域
                </td>
              </tr>
              <tr>
                <td>
                  targetText：
                </td>
                <td>
                  默认''，目标input的默认显示文字
                </td>
              </tr>
              <tr>
                <td>
                  targetType：
                </td>
                <td>
                  默认'hint'，目标input显示的类型，可选'score'
                </td>
              </tr>
            </table>
            <h5>示例</h5>
            <pre>
              <code>
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
              </code>
            </pre>
            <pre>
              <code>
  require('raty');
  $('.demo').raty();
              </code>
            </pre>
        </td>
      </tr>
      <tr id="Validform（表单验证）">
         <td>validform</td>
         <td>
           <h5>描述</h5>
            <p>validform表单验证，整合密码强度验证插件</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>内置规则</h5>
            <table class="table table-hover">
              <tr>
                <td>
                  *：
                </td>
                <td>
                  检测是否有输入，可以输入任何字符，不留空即可通过验证；
                </td></tr>
                <tr><td>
                *6-16：</td>
                <td>检测是否为6到16位任意字符；
                </td></tr>
                <tr><td>
                n：</td>
                <td>数字类型；
                </td></tr>
                <tr><td>
                n6-16：</td>
                <td>6到16位数字；
                </td></tr>
                <tr><td>
                s：</td>
                <td>字符串类型；
                </td></tr>
                <tr><td>
                s6-18：</td>
                <td>6到18位字符串；
                </td></tr>
                <tr><td>
                p：</td>
                <td>验证是否为邮政编码；
                </td></tr>
                <tr><td>
                m：</td>
                <td>手机号码格式；
                </td></tr>
                <tr><td>
                e：</td>
                <td>email格式；
                </td></tr>
                <tr><td>
                url：</td>
                <td>验证字符串是否为网址
                </td></tr>
                <tr><td>
                  验证中文直接写正则：
                </td><td>datatype="/^[\u4e00-\u9fa5]*$/"</td></tr>
              </table>
              <h5>配置</h5>
          <p>详见<a href="http://validform.rjboy.cn/document.html" target="_blank">官方文档</a></p>
          <h5>示例</h5>
            <pre>
            <code>
  &lt;style&gt;
  .demo label{display: inline-block;width: 5em;vertical-align: middle;}
  &lt;/style&gt;
            </code>
            <code>
  &lt;form class=&quot;demo&quot; id=&quot;reg_form&quot;&gt;
     &lt;p&gt;
     &lt;label&gt;用户名：&lt;/label&gt;
     &lt;input type=&quot;text&quot; class=&quot;inp&quot; name=&quot;username&quot; datatype=&quot;*6-15&quot;
     sucmsg=&quot;用户名验证通过！&quot; nullmsg=&quot;请输入用户名！&quot; errormsg=&quot;用户名范围在6~15位之间!&quot;&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;label&gt;密 码：&lt;/label&gt;
     &lt;input type=&quot;password&quot; class=&quot;inp&quot; name=&quot;userpassword&quot; datatype=&quot;*6-15&quot;
     errormsg=&quot;密码范围在6~15位之间！&quot; plugin=&quot;passwordStrength&quot; &gt;
     &lt;span class=&quot;passwordStrength&quot; style=&quot;&quot;&gt;&lt;b&gt;密码强度：&lt;/b&gt; &lt;span&gt;弱&lt;/span&gt;&lt;span&gt;中&lt;/span&gt;&lt;span class=&quot;last&quot;&gt;强&lt;/span&gt;&lt;/span&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;label&gt;确认密码：&lt;/label&gt;
     &lt;input type=&quot;password&quot; name=&quot;userpassword2&quot; datatype=&quot;*&quot; recheck=&quot;userpassword&quot; errormsg=&quot;您两次输入的密码不一致！&quot;&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;label&gt;邮箱：&lt;/label&gt;
     &lt;input type=&quot;text&quot; class=&quot;inp&quot; name=&quot;email&quot; datatype=&quot;e&quot;  errormsg=&quot;请输入正确的邮箱!&quot; ignore=&quot;ignore&quot;&gt;
     &lt;/p&gt;
     &lt;p class=&quot;valid&quot;&gt;
     &lt;label&gt;验证码：&lt;/label&gt;
     &lt;input type=&quot;text&quot; class=&quot;inp&quot; name=&quot;validnum&quot; datatype=&quot;*&quot; ajaxurl=&quot;/test/validRand.php&quot;
     sucmsg=&quot;验证码正确！&quot; nullmsg=&quot;请输入验证码！&quot; errormsg=&quot;验证码错误!&quot;&gt;
     &lt;img src=&quot;http://temp.im/80x20/?text=8888&quot; id=&quot;rand&quot; &gt;看不清？&lt;a href=&quot;###&quot; id=&quot;&quot;&gt;换一张&lt;/a&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;a href=&quot;###&quot;&gt;同意用户协议&lt;/a&gt; &lt;input type=&quot;checkbox&quot; name=&quot;agree&quot; datatype=&quot;*&quot; nullmsg=&quot;请阅读并同意用户协议&quot; &gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;注册&lt;/button&gt;
     &lt;/p&gt;
  &lt;/form&gt;
            </code>
            </pre>
            <pre>
            <code>
  //js
  require('validform');
  var loginForm = $('#reg_form').Validform({
      tiptype:1,              //1：弹出；其他：输入框后插入
      ajaxPost:true,
      usePlugin:{             //密码强度插件，不需要就删掉
        passwordstrength:{
          minLen:6,     //设置密码长度最小值，默认为0;
          maxLen:16,    //设置密码长度最大值，默认为30;
          trigger:function(obj,error){            
            if(error){
              obj.parent().find(".Validform_checktip").show();
              obj.parent().find(".passwordStrength").hide();
            }else{
              obj.parent().find(".Validform_checktip").hide();
              obj.parent().find(".passwordStrength").show();  
            }
          }
        }
      },
      callback:function(form){
        
      }
    });
            </code>
            </pre>
         </td>
      </tr>
      <tr id="Video（跨平台视频播放）">
         <td>video</td>
         <td>
            <h5>描述</h5>
            <p>集成video-js实现的跨平台视频播放插件，支持HTML5视频的跨平台播放，详见<a href="https://github.com/videojs/video.js" target="_blank">项目主页</a></p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>controls</th>
                <td>是否有控件</td>
              </tr>
              <tr>
                <th>autoplay</th>
                <td>是否自动播放</td>
              </tr>
              <tr>
                <th>preload</th>
                <td>预加载，可选'auto','metadata','no'，分别是自动，仅加载视频信息数据，不加载</td>
              </tr>
              <tr>
                <th>poster</th>
                <td>封面图片</td>
              </tr>
              <tr>
                <th>loop</th>
                <td>默认false，是否循环播放</td>
              </tr>
              <tr>
              <tr>
                <th>width</th>
                <td>播放器宽度</td>
              </tr>
              <tr>
                <th>height</th>
                <td>播放器高度</td>
              </tr>
              <tr>
                <th>其他</th>
                <td>见<a href="https://github.com/videojs/video.js/blob/stable/docs/index.md" target="_blank">官方文档</a></td>
              </tr>
            </table>
            <h5>示例</h5>
            <pre>
            <code>
  &lt;video id=&quot;really-cool-video&quot; class=&quot;video-js vjs-default-skin&quot;&gt;
    &lt;source src=&quot;http://bcs.duapp.com/images-link/sample.mp4&quot; type='video/mp4'&gt;
    &lt;p class=&quot;vjs-no-js&quot;&gt;不支持js的浏览器会看到这个&lt;/p&gt;
  &lt;/video&gt;
            </code>
            </pre>
            <pre>
               <code>
  require('video');
  var player = videojs('really-cool-video', {
    width: 640,
    height: 264,
    poster: '/resources/web/images/apple-touch-icon.png',
    controls:true,
    autoplay:true,
    preload:'auto'
  });
                  </code>
            </pre>
         </td>
      </tr>

      <tr id="Webuploader（上传）">
        <td>webuploader</td>
        <td>
          <h5>描述</h5>
            <p>改造自<a href="http://fex.baidu.com/webuploader/" target="_blank">webuploader</a>，兼容ie6 +，android4 +，支持上传前压缩，上传前剪裁，分段上传，MD5秒传，断点续传</p>
        <p>插件封装的很底层，用起来较麻烦，但是功能很全面，demo演示了一个具有拖拽上传、截图粘贴上传、格式过滤、获取缩略图功能的简单示例。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <p>见<a href="http://fex.baidu.com/webuploader/doc/index.html" target="_blank">官网文档</a></p>
            <h5>示例</h5>
          <pre>
            <code>
  &lt;style&gt;
  .demo{margin:50px;border:4px dashed #ccc;padding:100px;}
  .uploader-list{overflow: hidden;margin:10px 0;}
  .uploader-list .file-item{float: left;width: 100px;height: 100px;position: relative;
  border:4px solid #ccc;border-radius: 4px;margin:0 8px 8px 0;overflow: hidden;}
  .uploader-list .file-item .info{position: absolute;left: 0;bottom:0;width: 100%;
  background:rgba(0,0,0,.5);color:#fff;text-align: center;}
  .uploader-list .file-item .progress{position: absolute;left: 0;height: 40px;top:50%;
  margin-top:-20px;width: 100%; }
  .uploader-list .file-item .progress span{position: absolute;left: 0;top:0;height: 100%;overflow: hidden;width: 0;background:green;opacity: .5;} 
  .uploader-list .file-item.upload-state-done{border-color:green;}

  &lt;/style&gt;
  &lt;div id=&quot;uploader-demo&quot; class=&quot;demo&quot;&gt;
      &lt;div id=&quot;fileList&quot; class=&quot;uploader-list&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;filePicker&quot; &gt;选择图片&lt;/div&gt;
      &lt;div id=&quot;ctlBtn&quot; class=&quot;webuploader-pick&quot;&gt;开始上传&lt;/div&gt;
  &lt;/div&gt;
            </code>
          </pre>
          <pre>
            <code>
  var WebUploader = require('webuploader');

  //初始化上传实例
    var uploader = WebUploader.create({
      auto:false,                       // 自动上传，默认false
      server: '/test/fileupload.php',   // 上传地址
      pick: '#filePicker',              // 选择文件按钮
      dnd: '#uploader-demo',            // 拖拽上传区域，默认null不启用
      paste : document.body,            // 粘贴上传区域，默认null不启用
      accept:{                           // 限制文件格式
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    chunked :false,                     // 分片上传，默认false不启用
    chunkSize : 20971521                // 分片大小，示例2MB，默认5MB     
  });

    //添加文件列队
    uploader.on( 'fileQueued', function( file ) {
      var $li = $(
              '&lt;div id=&quot;' + file.id + '&quot; class=&quot;file-item thumbnail&quot;&gt;' +
                  '&lt;img&gt;' +
                  '&lt;div class=&quot;info&quot;&gt;' + file.name + '&lt;/div&gt;' +
              '&lt;/div&gt;'
              ),
          $img = $li.find('img');

      $('#fileList').append( $li );

      // 创建缩略图
      uploader.makeThumb( file, function( error, src ) {
          if ( error ) {
              $img.replaceWith('&lt;span&gt;不能预览&lt;/span&gt;');
              return;
          }
          $img.attr( 'src', src );
      } ,100 ,100);
  });

  // 监听上传进度
  uploader.on( 'uploadProgress', function( file, percentage ) {
      var $li = $( '#'+file.id ),
          $percent = $li.find('.progress span');

      if ( !$percent.length ) {
          $percent = $('&lt;p class=&quot;progress&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;')
                  .appendTo( $li )
                  .find('span');
      }
      console.log(percentage);
      $percent.css( 'width', percentage * 100 + '%' );
  });

  // 上传后判断服务器返回信息
  uploader.on( 'uploadAccept', function( file, response ) {
    if(response.err){
      //不成功
      return false;
    }   
  });

  // 文件上传成功
  uploader.on( 'uploadSuccess', function( file ) {
      console.log('uploadSuccess');
      $( '#'+file.id ).addClass('upload-state-done');
  });

  // 文件上传失败
  uploader.on( 'uploadError', function( file ) {
      console.log('uploadError');
      var $li = $( '#'+file.id ),
          $error = $li.find('div.error');

      if ( !$error.length ) {
          $error = $('&lt;div class=&quot;error&quot;&gt;&lt;/div&gt;').appendTo( $li );
      }

      $error.text('上传失败');
  });

  // 完成上传完了，无论成功或者失败，都删除进度条。
  uploader.on( 'uploadComplete', function( file ) {
      console.log('uploadComplete');
      $( '#'+file.id ).fadeOut(512);
  });

  // 开始上传
  $('#ctlBtn').on( 'click', function() {
      uploader.upload();
  });
            </code>
          </pre>
        </td>
      </tr>
      <tr id="Autocomplete（自动补全）">
        <td>autocomplete</td>
        <td>
            <h5>描述</h5>
            <p>自动补全插件，移植自<a href="https://github.com/devbridge/jQuery-Autocomplete" target="_blank">jquery.autocomplete</a></p>
            <p>UI部分跟select有很大重叠，后期可能会作为select插件的一个功能模块，不会独立存在。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>serviceUrl</th>
                <td>远程请求地址</td>
              </tr>
              <tr>
                <th>lookup</th>
                <td>本地查找数据</td>
              </tr>
            </table>
            <p>完整API见<a href="https://github.com/devbridge/jQuery-Autocomplete#api" target="_blank">官方文档</a></p>
            <h5>示例</h5>
          
          <pre>
            <code>
  &lt;!-- html --&gt;
  &lt;form&gt;
      &lt;input type=&quot;text&quot; name=&quot;country&quot; id=&quot;autocomplete-ajax&quot; /&gt;
      &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt;
  &lt;/form&gt;
            </code>
          </pre>
          <pre>
            <code>
    // js
    var countriesArray = [{"value":"Andorra","data":"AD"},{"value":"United Arab Emirates","data":"AE"},{"value":"Afghanistan","data":"AF"},{"value":"Antigua and Barbuda","data":"AG"},{"value":"Anguilla","data":"AI"},{"value":"Albania","data":"AL"},{"value":"Armenia","data":"AM"},{"value":"Netherlands Antilles","data":"AN"},{"value":"Angola","data":"AO"},{"value":"Antarctica","data":"AQ"},{"value":"Argentina","data":"AR"},{"value":"American Samoa","data":"AS"},{"value":"Austria","data":"AT"},{"value":"Australia","data":"AU"},{"value":"Aruba","data":"AW"},{"value":"Åland Islands","data":"AX"},{"value":"Azerbaijan","data":"AZ"},{"value":"Bosnia and Herzegovina","data":"BA"},{"value":"Barbados","data":"BB"},{"value":"Bangladesh","data":"BD"},{"value":"Belgium","data":"BE"},{"value":"Burkina Faso","data":"BF"},{"value":"Bulgaria","data":"BG"},{"value":"Bahrain","data":"BH"},{"value":"Burundi","data":"BI"},{"value":"Benin","data":"BJ"},{"value":"Saint Barthélemy","data":"BL"},{"value":"Bermuda","data":"BM"},{"value":"Brunei","data":"BN"},{"value":"Bolivia","data":"BO"},{"value":"British Antarctic Territory","data":"BQ"},{"value":"Brazil","data":"BR"},{"value":"Bahamas","data":"BS"},{"value":"Bhutan","data":"BT"},{"value":"Bouvet Island","data":"BV"},{"value":"Botswana","data":"BW"},{"value":"Belarus","data":"BY"},{"value":"Belize","data":"BZ"},{"value":"Canada","data":"CA"},{"value":"Cocos [Keeling] Islands","data":"CC"},{"value":"Congo - Kinshasa","data":"CD"},{"value":"Central African Republic","data":"CF"},{"value":"Congo - Brazzaville","data":"CG"},{"value":"Switzerland","data":"CH"},{"value":"Côte d’Ivoire","data":"CI"},{"value":"Cook Islands","data":"CK"},{"value":"Chile","data":"CL"},{"value":"Cameroon","data":"CM"},{"value":"China","data":"CN"},{"value":"Colombia","data":"CO"},{"value":"Costa Rica","data":"CR"},{"value":"Serbia and Montenegro","data":"CS"},{"value":"Canton and Enderbury Islands","data":"CT"},{"value":"Cuba","data":"CU"},{"value":"Cape Verde","data":"CV"},{"value":"Christmas Island","data":"CX"},{"value":"Cyprus","data":"CY"},{"value":"Czech Republic","data":"CZ"},{"value":"East Germany","data":"DD"},{"value":"Germany","data":"DE"},{"value":"Djibouti","data":"DJ"},{"value":"Denmark","data":"DK"},{"value":"Dominica","data":"DM"},{"value":"Dominican Republic","data":"DO"},{"value":"Algeria","data":"DZ"},{"value":"Ecuador","data":"EC"},{"value":"Estonia","data":"EE"},{"value":"Egypt","data":"EG"},{"value":"Western Sahara","data":"EH"},{"value":"Eritrea","data":"ER"},{"value":"Spain","data":"ES"},{"value":"Ethiopia","data":"ET"}];

    require('autocomplete')
    $('#autocomplete-ajax').autocomplete({
          lookup: countriesArray                      //本地查找数据
    });
            </code>
          </pre>
        </td>
      </tr>
      <tr id="Bdmap（百度地图）">
        <td>bdmap</td>
        <td>
            <h5>描述</h5>
            <p>封装百度地图js2.0大众版，返回方法接收两个参数，分别为key和回调。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>示例</h5>
          
          <pre>
            <code>
  &lt;style&gt;
  #container img{max-width: none;} /* 去掉百度地图中的图片最大宽度限制 */
  &lt;/style&gt;

  &lt;div id=&quot;container&quot; style=&quot;height:500px&quot;&gt;&lt;/div&gt;
            </code>
          </pre>
          <pre>
            <code>
  var bdmap = require('bdmap');

  bdmap('D1DX6yGc5HGh28jtaAwNzcBi',function(){
    // 在回调中创建地图
    var map = new BMap.Map("container");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);  
  });
            </code>
          </pre>
        </td>
      </tr>
      <tr id="Bdshare（百度分享）">
         <td>bdshare</td>
         <td>
            <h5>描述</h5>
            <p>封装百度分享，扩展分享按钮html自定义能力，接收通用设置和share设置，都是标准的百度分享参数格式，获取HTML代码请点<a href="http://share.baidu.com/code" target="_blank">这里</a>。</p>
            <h5>多终端</h5>
            <p>移动端不建议使用</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>commonConfig</th>
                <td>通用设置，可选，提供onBeforeClick接口用于点击分享按钮时动态更改配置，详见<a href="http://share.baidu.com/code/advance#config-common" target="_blank">通用设置</a>。</td>
              </tr>
              <tr>
                <th>shareConfig</th>
                <td>share设置，可选，允许对多组分享通过data-tag标记做不同的配置，当只有一组分享时可以直接传入json格式，不传参将使用百度默认值，详见<a href="http://share.baidu.com/code/advance#config-share" target="_blank">分享按钮设置</a>。</td>
              </tr>
            </table>
            <h5>注意</h5>
            <ol>
              <li>全站的百度分享代码必须commonjs中通过一次require.async集中配置，多次配置只有最后一次会生效；</li>
              <li>分享按钮a标签HTML自定义，最多只允许增加一层DOM，否则点击事件不生效。</li>
            </ol>

            <h5>示例</h5>
           
        <pre>
                <code>
   &lt;!-- 如果页面内有多组分享 --&gt;
   &lt;div class=&quot;bdsharebuttonbox&quot; data-tag=&quot;share_1&quot; data-sharetitle=&quot;自定义分享标题&quot;&gt;
      &lt;a class=&quot;bds_mshare&quot; data-cmd=&quot;mshare&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_qzone&quot; data-cmd=&quot;qzone&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tsina&quot; data-cmd=&quot;tsina&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_baidu&quot; data-cmd=&quot;baidu&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_renren&quot; data-cmd=&quot;renren&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tqq&quot; data-cmd=&quot;tqq&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_more&quot; data-cmd=&quot;more&quot;&gt;更多&lt;/a&gt;
      &lt;a class=&quot;bds_count&quot; data-cmd=&quot;count&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;div class=&quot;bdsharebuttonbox&quot; data-tag=&quot;share_2&quot;&gt;
      &lt;a class=&quot;bds_mshare&quot; data-cmd=&quot;mshare&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_qzone&quot; data-cmd=&quot;qzone&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tsina&quot; data-cmd=&quot;tsina&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_baidu&quot; data-cmd=&quot;baidu&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_renren&quot; data-cmd=&quot;renren&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tqq&quot; data-cmd=&quot;tqq&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_more&quot; data-cmd=&quot;more&quot;&gt;更多&lt;/a&gt;
      &lt;a class=&quot;bds_count&quot; data-cmd=&quot;count&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
  </code>
</pre>
        <pre>
                <code>
   //多组分享js         
   require.async('bdshare',function(bdshare){
       bdshare({
        //如果不需要从页面获取分享内容不要加onBeforeClick这一段
        onBeforeClick: function(cmd, config) {
          var e = (arguments.callee.caller.arguments[0] || window.event).event;
          config.bdText = $(e.target).parents('.bdsharebuttonbox').data('sharetitle');
          //更改标题，所取的值若为undefined将默认使用页面title
          config.bdDesc = 'shareTo ' + cmd;
          //cmd是分享目标id，例如人人的id是"renren"，可以用来识别具体分享到哪里
          config.bdPic = 'http://temp.im/100x100/';
          //更改分享信息的缩略图
          config.bdUrl = window.location.href + '?shareTo=' + cmd;
          //更改分享信息的url

          return config; //返回新的config
        }
       },[{
            tag : 'share_1',  
            bdSize : 16,      //图标尺寸, 16｜24｜32
            bdStyle : '1'     //图标类型, 0｜1｜2

         },
         {
            tag : 'share_2',
            bdSize : 32,
            bdStyle: 2
         }])
   });
               </code>
</pre>
         </td>
      </tr>
      <tr id="Box（弹窗）">
         <td>box</td>
         <td>
            <h5>描述</h5>
            <p>弹窗插件，具有弹出、提醒、询问、弹出ajax内容、弹出iframe。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>top</th>
                <td>默认无，若有值将固定弹窗据window顶部距离</td>
              </tr>
              <tr>
                <th>title</th>
                <td>默认“对话框”，对话框标题html</td>
              </tr>
              <tr>
                <th>oktext</th>
                <td>修改【确定】按钮的文字</td>
              </tr>
              <tr>
                <th>canceltext</th>
                <td>修改【取消】按钮的文字</td>
              </tr>
              <tr>
                <th>shut</th>
                <td>默认“×”，关闭按钮html</td>
              </tr>
              <tr>
                <th>index</th>
                <td>默认99，弹出层级</td>
              </tr>
              <tr>
                <th>opacity</th>
                <td>默认0.5，幕布透明度</td>
              </tr>
              <tr>
                <th>width</th>
                <td>默认auto，弹窗宽度</td>
              </tr>
              <tr>
                <th>height</th>
                <td>默认高度，弹窗高度</td>
              </tr>
              <tr>
                <th>layout</th>
                <td>默认true，是否包含边框</td>
              </tr>
              <tr>
                <th>bar</th>
                <td>默认true，是否显示标题栏</td>
              </tr>
              <tr>
                <th>bg</th>
                <td>默认true，是否显示背景层</td>
              </tr>
              <tr>
                <th>btnclose</th>
                <td>默认true，是否显示关闭按钮</td>
              </tr>
              <tr>
                <th>fix</th>
                <td>默认true，弹窗是否框固定在页面上</td>
              </tr>
              <tr>
                <th>bgclose</th>
                <td>默认true，是否点击半透明背景隐藏弹出框</td>
              </tr>
              <tr>
                <th>drag</th>
                <td>默认false，是否可拖拽</td>
              </tr>
              <tr>
                <th>protect</th>
                <td>默认false，若为true，关闭后会将弹出的元素appendTo('body')</td>
              </tr>
              <tr>
                <th>onshow(box)</th>
                <td>默认无，弹窗显示后回调，接收弹窗自身为参数</td>
              </tr>
              <tr>
                <th>onclose</th>
                <td>默认无，弹窗关闭后触发事件</td>
              </tr>
              <tr>
                <th>delay</th>
                <td>默认0，弹窗自动关闭时间, 0和负值不触发</td>
              </tr>
              <tr>
                <th>lang</th>
                <td>默认0，语言选择，0：中文 1：英文</td>
              </tr>
              <tr>
                <th>hook</th>
                <td>自定义样式钩子，用于给弹窗附加class修改样式，默认无</td>
              </tr>
              <tr>
                <th>color</th>
                <td>$.box.msg方法的情景色，使用的是ui.css提供的几种背景色，默认info，可选info，primary，success，warning，danger</td>
              </tr>
            </table>
            <h5>示例</h5>
            <pre>
              <code>
  &lt;style&gt;
  button{margin:.5em;}
  .myextclass .wrap_bar{background:green;}
  &lt;/style&gt;

  &lt;!-- html --&gt;
  &lt;form class=&quot;demo hide&quot; style=&quot;padding:20px;&quot;&gt;
    &lt;p&gt;
      &lt;label&gt;姓名：&lt;/label&gt;&lt;input type=&quot;text&quot;&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label&gt;电话：&lt;/label&gt;&lt;input type=&quot;tel&quot;&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label&gt;邮箱：&lt;/label&gt;&lt;input type=&quot;mail&quot;&gt;
    &lt;/p&gt;
    &lt;p class=&quot;tc&quot; style=&quot;margin-top:1em&quot;&gt;
      &lt;button&gt;填好了&lt;/button&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxDom&quot;&gt;弹出Dom&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxAlert&quot;&gt;提醒&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxMsg&quot;&gt;提示&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxConfirm&quot;&gt;询问&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxAjax&quot;&gt;Ajax弹出内容&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxIfram&quot;&gt;弹出ifram&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default modal&quot;&gt;弹出一个模态自定义内容&lt;/button&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default extclass&quot;&gt;添加自定义class&lt;/button&gt;&lt;/div&gt;
              </code>
            </pre>
            <pre>
                <code>

    //支持全局修改默认配置，全局配置必须在require('module name')，
    //例如全局语言改为英文
    window.boxGlobal = {lang:1};

    //js
    require('box');

    //弹出DOM
    $('.boxDom').on('click',function(){
      $.box( $('.demo') );
    })
    
    //提醒(有一个确定按钮)
    $('.boxAlert').on('click',function(){
      $.box.alert('hello box!',function(){
        alert('alert的回调')
      });
    })
    
    //顶部提示信息
    $('.boxMsg').on('click',function(){
      $.box.msg('注意，这是一条测试信息！',{
        onclose:function(){
          alert('msg的回调')
        }
      });
    })

    //询问(有确定和取消按钮)
    $('.boxConfirm').on('click',function(){
      $.box.confirm('hello box!', function(){
        alert('确定回调');
      }, function(){
        alert('取消回调');
      })
    })
    
    //Ajax
    $('.boxAjax').on('click',function(){
      $.box.ajax('/test/ajax.php', { 
        param: "param1" //Ajax参数
      })
    })
    
    //ifram
    $('.boxIfram').on('click',function(){
      $.box.ifram('http://baidu.com',{
        name: "baidu",  //ifram name，默认空（不是弹窗标题）
        width: 640,     //iframe宽，默认640
        height: 480     //iframe高，默认480
      }, boxOption)
    })

    //modal
    $('.modal').on('click',function(){
      $.box('&lt;i class=&quot;ion rotation&quot; style=&quot;font-size:24px&quot;&gt;&amp;#xe646;&lt;/i&gt;',{
        layout:false,
        bgclose:false,
        delay:6e3
      })
    })

    //extclass
    $('.extclass').on('click',function(){
      $.box('通过附加自定义class修改了弹窗样式',{
        hook: "myextclass"
      })
    })

            </code>
</pre>
         </td>
      </tr>
      <tr id="Cons（匀速滚动）">
         <td>cons</td>
         <td>
            <h5>描述</h5>
            <p>匀速滚动，容器和li的高度/宽度必须明确指定</p>
            <h5>多终端</h5>
            <p>不支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>speed</th>
                <td>默认1，单位px，单位时间内移动距离。</td>
              </tr>
              <tr>
                <th>dir</th>
                <td>默认true，滚动方向：true横向 false竖向</td>
              </tr>
              <tr>
                <th>prev</th>
                <td>指定向左按钮，jquery选择器格式，不指定默认添加a.arr_prev</td>
              </tr>
              <tr>
                <th>next</th>
                <td>指定向右按钮，jquery选择器格式，不指定默认添加a.arr_next</td>
              </tr>
            </table>

            <h5>示例</h5>
            
            <pre>
            <code>
  &lt;style&gt;
  /*css*/
  .demo{width:300px;height:100px;}
  .demo li{float:left; width:290px;height:90px;background:#eee;margin:0 10px 10px 0;}
  &lt;/style&gt;
            </code>
            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo&quot;&gt;
      &lt;ul&gt;
     &lt;li&gt;content1&lt;/li&gt;
     &lt;li&gt;content2&lt;/li&gt;
     &lt;li&gt;content3&lt;/li&gt;
     &lt;li&gt;content4&lt;/li&gt;
     &lt;li&gt;content5&lt;/li&gt;
     &lt;li&gt;content6&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
          </code>
        </pre>
        <pre>
          <code>
  //js
  require.async('cons',function(){
     $('.demo').conScroll();
  });
               </code>
          </pre>
         </td>
      </tr>
      <tr id="Countdown（倒计时）">
         <td>countdown</td>
         <td>
            <h5>描述</h5>
            <p>倒计时插件，通过重写render方法可自定义显示格式。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>begin</th>
                <td>开始时间，可选，默认本地时间</td>
              </tr>
              <tr>
                <th>date</th>
                <td>结束时间，默认 2089-02-05 </td>
              </tr>
              <tr>
                <th>refresh</th>
                <td>刷新率，默认每秒刷新</td>
              </tr>
              <tr>
                <th>offset</th>
                <td>偏移量，用于纠正时区偏差</td>
              </tr>
              <tr>
                <th>onEnd</th>
                <td>结束回调，默认无</td>
              </tr>
              <tr>
                <th>render</th>
                <td>渲染方法，接收两个参数分别是当前dom和日期</td>
              </tr>
            </table>

            <h5>示例</h5>
            
          <pre>
            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
            </code>
          </pre>
          <pre>
            <code>
   //js
   require.async('countdown', function() {
      $('.demo').Countdown({
         render: function($this, date) { 
            $this.html(date.years + " 年, " +
               date.days + " 天, " +
               date.hours + " 时, " +
               date.min + " 分 " +
               date.sec + " 秒"
            )
         }
      })
   })
            </code>
            </pre>
         </td>
      </tr>
      <tr id="Drag（拖拽）">
         <td>drag</td>
         <td>
            <h5>描述</h5>
            <p>拖拽插件，拖拽元素大于拖拽范围或者小于拖拽范围都可以，两种情况都支持边缘检测</p>
            <h5>多终端</h5>
            <p>不支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>wrap</th>
                <td>指定拖拽范围，默认选择父元素</td>
              </tr>
              <tr>
                <th>overflow</th>
                <td>是否允许超出边缘，默认不允许</td>
              </tr>
              <tr>
                <th>callback</th>
                <td>拖拽结束后的回调，接受拖拽元素为参数</td>
              </tr>
            </table>

            <h5>示例</h5>
            
         <pre>
            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;drag&quot; style=&quot;width:100px;height:100px;background:#434343;&quot;&gt;&lt;/div&gt;
            </code>
            </pre>
            <pre>
            <code>
  //js
  require('drag');
  $('.drag').drag();
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Easing（animate动画扩展）">
        <td>easing</td>
        <td>
          <h5>描述</h5>
            <p>来自jquery.easing.js v1.3，大部分涉及动画的插件都引入了easing。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>示例</h5>
        
        <pre>
        <code>
  require('easing');

  $(element).slideUp({
    duration: 1000, 
    easing: method, 
    complete: callback
  });

  $(element).animate({
    height:100
  },{
    duration: 1000, 
    easing: method, 
    complete: callback
  });
        </code>
        </pre>
        </td>
      </tr>
      <tr id="Etpl（模板引擎）">
         <td>etpl</td>
         <td>
            <h5>描述</h5>
            <p>模板引擎，用于相对大量的视图渲染，详见<a href="https://github.com/ecomfe/etpl" target="_blank">项目主页</a></p>
            <h5>多终端</h5>
            <p>支持</p>

            <h5>示例</h5>
          
            <pre>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
              </code>
            </pre>
            <pre>
               <code>
  var etpl=require('etpl');
  $.getJSON("/test/data.json",function(data){
    var render = etpl.compile('Hello ${name}!');
    var text = render({ name: 'etpl' });
    $('.demo').html(text);
  });
                  </code>
</pre>
         </td>
      </tr>
      <tr id="Img-loaded（图片加载完成）">
         <td>img-loaded</td>
         <td>
            <h5>描述</h5>
            <p>对目标区域内图片做加载完成检测</p>
            <h5>多终端</h5>
            <p>支持</p>

            <h5>示例</h5>
            
            <pre>
            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo&quot;&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/442/548/?582&quot; &gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/405/406/?324&quot; &gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/374/330/?734&quot; &gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
        </code>
        </pre>
        <pre>
                <code>
  //js
  require('img-loaded');
  $('.demo').imagesLoaded(function(){
     alert('加载完成');
  })
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Img-auto（图片居中）">
         <td>img-auto</td>
         <td>
            <h5>描述</h5>
            <p>图片上下左右居中，依赖img-ready</p>
            <h5>多终端</h5>
            <p>支持</p>

            <h5>示例</h5>
            
           <pre>
             <code>
  &lt;style&gt;
  .demo{width: 150px;height: 150px;border:1px solid #ccc;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;div class=&quot;demo&quot;&gt;
    &lt;img src=&quot;http://temp.im/100x100/&quot;&gt;
  &lt;/div&gt;
             </code>
           </pre>
           <pre>
             <code>
  // JS及默认参数
  require('img-auto');
  $('.demo').imgAuto(function(){
    alert('回调')
  })
             </code>
          </pre>
         </td>
      </tr>
      <tr id="Img-ready（图片尺寸预取）">
         <td>img-ready</td>
         <td>
            <h5>描述</h5>
            <p>能在图片下载完成之前检测到图片真实尺寸，返回方法imgReady(src,readyCall,loadCall)，接受三个参数分别是图片src、检测完成回调，下载完成回调</p>
            <h5>多终端</h5>
            <p>支持</p>
            
            <h5>示例</h5>
            
           <pre>
             <code>
    &lt;!-- html --&gt;
    &lt;img id=&quot;demo&quot; src=&quot;http://lorempixel.com/442/548/?582&quot;&gt;
             </code>
            </pre>
             <pre>
             <code>
  var ready = require('img-ready');
  ready($('#demo').attr('src'), 
    function(width,height){
      $('body').append($('&lt;div&gt;预取width:'+width+' height:'+height+'&lt;/div&gt;'))
    }, function(width,height){
      $('body').append($('&lt;div&gt;加载完成！&lt;/div&gt;'));
    }
  )
             </code>
</pre>
         </td>
      </tr>
      <tr id="Json（JSON处理）">
         <td>json</td>
         <td>
            <h5>描述</h5>
            <p>封装jquery.json-2.4</p>
            <h5>多终端</h5>
            <p>移动端建议使用JSON原生语法</p>

            <h5>示例</h5>
          
          <pre>
            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
            </code>
          </pre>
         <pre>
         <code>
  require('json');
  var thing = { plugin: 'jquery-json', version: 2.4 };

  var encoded = $.toJSON( thing );//字面量转JSON格式字符串
  $('.demo').append("toJSON: "+encoded+'&lt;br&gt;');

  var name = $.evalJSON( encoded ).plugin;//执行JSON格式字符串
  $('.demo').append("getName: "+name+'&lt;br&gt;');

  var version = $.secureEvalJSON( encoded ).version;//安全执行JSON格式字符串
  $('.demo').append("secureGetVersion: "+version+'&lt;br&gt;');

            </code>
          </pre>
         </td>
      </tr>
      <tr id="Lazyload（图片懒加载）">
         <td>lazyload</td>
         <td>
            <h5>描述</h5>
            <p>图片懒加载，懒加载图片用"data-lazy"属性存贮真实图片地址</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>effect</th>
                <td>加载后显示效果：show | fadeIn </td>
              </tr>
              <tr>
                <th>firstCount</th>
                <td>默认1，第一次加载数量</td>
              </tr>
              <tr>
                <th>everyCount</th>
                <td>默认1，每次加载数量</td>
              </tr>
              <tr>
                <th>distance</th>
                <td>默认100，单位px，开始加载距离(将加载图片与视野底部的距离)</td>
              </tr>
            </table>

            <h5>示例</h5>
            
         <pre>
         <code>
  &lt;style&gt;
  .demo p{float:left; margin:20px; width:600px; height: 600px; background:#eee;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;div class=&quot;demo&quot;&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/800x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/801x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/802x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/803x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/804x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/805x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/800x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/801x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/802x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/803x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/804x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/805x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/800x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/801x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/802x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/803x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/804x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/805x600/&quot; &gt;&lt;/p&gt;
  &lt;/div&gt;
        </code>
      </pre>
      <pre>
        <code>
  //js
  require('lazyload');
  $('.demo').lazyload();
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Masonry（瀑布流）">
         <td>masonry</td>
         <td>
            <h5>描述</h5>
            <p>瀑布流插件，封装自<a href="http://masonry.desandro.com/" target="_blank">masonry</a></p>
            <h5>多终端</h5>
            <p>移动端不建议使用</p>

            <h5>示例</h5>
          
         <pre>
         <code>
  &lt;style&gt; 
    /*css*/
    .item { width: 200px; margin:10px;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;!--html--&gt;
  &lt;ul id=&quot;container&quot;&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x100/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x400/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x300/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x600/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x100/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x400/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x300/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x600/&quot;&gt;
    &lt;/li&gt;
  &lt;/ul&gt;    
            </code>
          </pre>
          <pre>
            <code>
  //加载模块
  require('masonry');
  require('img-loaded');
  //定义变量
  var $container = $('#container'),  sTimer;
  //应用瀑布流
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.item'
    })
  });
  //滚动加载
  var win=$(window);
  win.scroll(function scrollHandler(){
    clearTimeout(sTimer);
    sTimer = setTimeout(function() {
      if(win.loaded == 1){win.unbind("scroll", scrollHandler);}
      var t=win.scrollTop(),
          h=win.height(),
          t1= $container.offset().top, 
          h1 =$container.outerHeight(true);

      if(t+h >= t1+h1){
        addItem(3);
      }
    }, 100);
  });
     
  //模拟动态加载数据
  function addItem(n) {
    var fragment =  '&lt;li class=&quot;item&quot;&gt;\
        &lt;img src=&quot;http://temp.im/200x100/&quot;&gt;\
      &lt;/li&gt;\
      &lt;li class=&quot;item&quot;&gt;\
        &lt;img src=&quot;http://temp.im/200x400/&quot;&gt;\
      &lt;/li&gt;\
      &lt;li class=&quot;item&quot;&gt;\
        &lt;img src=&quot;http://temp.im/200x300/&quot;&gt;\
      &lt;/li&gt;\
      &lt;li class=&quot;item&quot;&gt;\
        &lt;img src=&quot;http://temp.im/200x600/&quot;&gt;\
      &lt;/li&gt;';
    for ( var i = 0; i &lt; n; i++ ) {
      fragment+=fragment;
    };
    $container.append($(fragment)).imagesLoaded(function(){
      $container.masonry("reload")
    });
  };
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Mousetrap（按键监听）">
         <td>mousetrap</td>
         <td>
            <h5>描述</h5>
            <p>按键监听</p>
            <h5>多终端</h5>
            <p>不支持</p>

            <h5>示例</h5>
            
            <pre>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;
    &lt;p&gt;单按键：按&quot;a&quot;或&quot;?&quot;或&quot;esc&quot;&lt;/p&gt;
    &lt;p&gt;功能键：按&quot;ctrl+shift+k&quot;&lt;/p&gt;
    &lt;p&gt;多组按键绑定同一个事件：按&quot;command k&quot; 或者 &quot;control k&quot;&lt;/p&gt;
    &lt;p&gt;组合键：试试&quot;up up down down left right left right b a enter&quot;&lt;/p&gt;
  &lt;/div&gt;
              </code>
            </pre>
            <pre>
               <code>
  //js
  require.async('mousetrap',function(){
    // 单按键
    Mousetrap.bind('a', function() { 
      alert('a');
    });
    Mousetrap.bind(&quot;?&quot;, function() { 
      alert('show shortcuts!');
    });
    Mousetrap.bind('esc', function() { 
      alert('退出？');
    }, 'keyup');
   
    // 功能键
    Mousetrap.bind('ctrl+shift+k', function() { 
      alert('command shift k');
    });

    // 多组按键绑定相同事件
    Mousetrap.bind(['command+k', 'ctrl+k'], function() {
        alert('command k 或者 control k');
        return false; //取消系统默认事件
    });
   
    // 组合键
    Mousetrap.bind('up up down down left right left right b a enter', function() {
        alert("哇咔咔！");
    });
  });
                  
                  </code>
</pre>
         </td>
      </tr>
      <tr id="Mousewheel（鼠标滚轮监听）">
         <td>mousewheel</td>
         <td>
            <h5>描述</h5>
            <p>鼠标滚轮监听，回调函数的event包含三个属性：deltaX，deltaY，deltaFactor；分别代表横向滚动方向，纵向滚动方向，滚动长度(不同浏览器下该值不一致)</p>
            <h5>多终端</h5>
            <p>不支持</p>

            <h5>示例</h5>
            
        <pre>
          <code>
  &lt;style&gt;
  /*css*/
  .demo,.control{height: 200px;overflow: auto;border:1px solid #ccc;margin:10px;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  &lt;/div&gt;
  &lt;div class=&quot;control&quot;&gt;&lt;/div&gt;
          </code>
        </pre>
        <pre>
            <code class="javascript">
  //js
  require('mousewheel');
  //开始监听
  $('.demo').on('mousewheel', function(event) {
      $('.control').append('&lt;p&gt;'+event.deltaX+', '+event.deltaY+', '+event.deltaFactor+'&lt;/p&gt;');
  });
  //停止监听
  setTimeout(function(){
      $('.demo').unmousewheel();
      alert('监听事件已卸载！');
  },5e3)
                </code>
          </pre>
         </td>
      </tr>
      <tr id="On-scroll（滚动监听）">
         <td>on-scroll</td>
         <td>
            <h5>描述</h5>
            <p>监听页面滚动并操作出现在视野中的元素，可用于长页面滚动时做滚动加载；</p>
            <p>当指定target时，target的li子元素数量需与效果元素数量对应，当前元素对应的target>li将添加"active"类；</p>
            <p>当target向上滚出视野时将被添加"fixed"类，当指定targetFix时，"fixed"类将添加在targetFix元素上。</p>
            <h5>多终端</h5>
            <p>不支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>offset</th>
                <td>可选，顶部位置计算偏移量，默认0</td>
              </tr>
              <tr>
                <th>target</th>
                <td>可选，绑定目标，jquery选择器格式，默认无</td>
              </tr>
              <tr>
                <th>targetCell</th>
                <td>可选，绑定目标子元素类型，默认'li'</td>
              </tr>
              <tr>
                <th>targetFix</th>
                <td>可选，设置将添加fixed类的元素，通常是target的外层</td>
              </tr>
              <tr>
                <th>speed</th>
                <td>可选，滚动动画时间，单位ms，默认320</td>
              </tr>
              <tr>
                <th>onshow</th>
                <td>可选，元素第一次出现在视野的回调，默认无</td>
              </tr>
            </table>

            <h5>示例</h5>
            
          <pre>
            <code>
  &lt;!-- html --&gt;
  &lt;style&gt;
  .target_wrap{height:42px;}
  .demo_Target{width:980px;margin:0 auto;overflow: hidden;*zoom:1;background:#fff;border-left:1px solid #eee;}
  .demo_Target li{float: left;height: 40px;line-height: 40px;border:1px solid #eee;margin-left:-1px;width: 33%;text-align: center;cursor: pointer;}
  .demo_Target.fixed{position: fixed;left: 50%;margin-left: -490px;top:0;z-index: 99;}
  .demo_Target .active{color:#39f;background:#eee;}
  .demo_sections{width:978px;border:1px solid #ccc;padding:2em 0;margin:2em auto;
  height: 800px;}
  .lazyPush{height: 400px;}
  &lt;/style&gt;

  &lt;div class=&quot;target_wrap&quot;&gt;
    &lt;ul class=&quot;demo_Target&quot;&gt;
      &lt;li&gt;channel01&lt;/li&gt;
      &lt;li&gt;channel02&lt;/li&gt;
      &lt;li&gt;channel03&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;demo_sections&quot;&gt;
    anything...1
  &lt;/div&gt;
  &lt;div class=&quot;demo_sections&quot;&gt;
    anything...2
  &lt;/div&gt;
  &lt;div class=&quot;demo_sections&quot;&gt;
    anything...3
  &lt;/div&gt;

  &lt;div class=&quot;lazyPush&quot;&gt;
  &lt;textarea class=&quot;hide&quot;&gt;
    &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class=&quot;lazyPush&quot;&gt;
  &lt;textarea class=&quot;hide&quot;&gt;
    &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class=&quot;lazyPush&quot;&gt;
  &lt;textarea class=&quot;hide&quot;&gt;
    &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
            </code>
          </pre>
          <pre>
            <code>
  // js 参数说明
  require('on-scroll');
  //定位
  $('.demo_sections').onScroll({
    offset:42,
    target:'.demo_Target'
  });

  //滚动加载
  $('.lazyPush').onScroll({
    onshow:function(elem){
      base.topush($(elem),function(){
        console.log('懒加载完成')
      })
    }
  })  

            </code>
          </pre>
         </td>
      </tr>
      <tr id="Mmenu（菜单）">
         <td>mmenu</td>
         <td>
            <h5>描述</h5>
            <p>移动版导航插件，导航必须具有id属性，与导航控制按钮的href属性相同。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>注意</h5>
            <p>为避免插件加载期间导航错乱闪现，可以先将导航隐藏，插件运行后会清除原样式。</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>position</th>
                <td>/菜单位置，默认左侧 left || top || right || bottom</td>
              </tr>
              <tr>
                <th>zposition</th>
                <td>菜单层次，默认上层，front || next</td>
              </tr>
              <tr>
                <th>slidingSubmenus</th>
                <td>菜单展开方向，默认横向，true || false</td>
              </tr>
              <tr>
                <th>classes</th>
                <td>主题class, mm-light || mm-white || mm-black</td>
              </tr>
            </table>

            <h5>示例</h5>
            
            <pre>
               <code>
  &lt;nav class=&quot;demo hide&quot; id=&quot;menu&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;/1&quot;&gt;导航&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;/2&quot;&gt;导航2&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;/3&quot;&gt;导航3&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;/4&quot;&gt;导航4&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;a href=&quot;#menu&quot; class=&quot;mobile_key&quot;&gt;导航控制按钮&lt;/a&gt;  &lt;!--导航控制按钮--&gt;
      </code>
      </pre>
              <pre>
                <code>
  //js
  require('mmenu');
  $('.demo').mmenu();
               </code>
          </pre>
         </td>
      </tr>
      <tr id="Mousemenu（右键菜单）">
         <td>mousemenu</td>
         <td>
            <h5>描述</h5>
            <p>自定义鼠标右键，支持菜单内分组，调用格式为 $('.demo').mousemenu( data, option ) </p>
            <h5>多终端</h5>
            <p>不支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>name</th>
                <td>将作为菜单id的后缀，以区别多组菜单，只有一组可省略</td>
              </tr>
              <tr>
                <th>offsetX</th>
                <td>默认2，单位px，菜单左上角距点击位置横向距离</td>
              </tr>
              <tr>
                <th>offsetY</th>
                <td>默认2，单位px，菜单左上角距点击位置纵向距离</td>
              </tr>
              <tr>
                <th>textLimit</th>
                <td>默认6，菜单项显示文字个数，超出显示省略号</td>
              </tr>
              <tr>
                <th>beforeShow</th>
                <td>菜单显示前回调</td>
              </tr>
              <tr>
                <th>afterShow</th>
                <td>菜单显示后回调</td>
              </tr>
              <tr>
                <th>broke</th>
                <td>用于点击时做条件判断，返回真值将阻止本次弹出</td>
              </tr>
            </table>

            <h5>示例</h5>
            
        <pre>
          <code>
  &lt;style&gt;
  /*css*/
  .demo{height: 400px;border:1px solid #ccc;line-height: 400px;text-align: center;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;测试区域&lt;/div&gt;
          </code>
        </pre>
        <pre>
          <code>
  require('mousemenu');
  $('.demo').mousemenu(
      [
          [{
              text: "组1-1",
              func: function() {
                alert("组1-1");
              }
          }, {
              text: "组1-2",
              func: function() {
                alert("组1-2");
              }
          }],
          [{
              text: "组2-1",
              func: function() {
                alert("组2-1");
              }
          }, {
              text: "组2-2",
              func: function() {
                alert("组2-2");
              }
          }]
      ], {
          //配置
      }
  );
          </code>
</pre>
         </td>
      </tr>
      <tr id="Photowall（等高图片墙）">
         <td>photowall</td>
         <td>
            <h5>描述</h5>
            <p>类似百度图片搜索结果页的等高图片墙效果</p>
            <h5>多终端</h5>
            <p>不建议移动端使用</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>$this</th>
                <td>图片列表选择器</td>
              </tr>
              <tr>
                <th>items</th>
                <td>图片单元选择器</td>
              </tr>
              <tr>
                <th>border</th>
                <td>间距，默认10，单位px</td>
              </tr>

            </table>

            <h5>示例</h5>
            
            <pre>
               <code>
  &lt;style&gt;
  /* css */
  .imgList .imgItem ,.imgList .imgItem a img { display: inline-block; *display: inline;
  zoom: 1; vertical-align: top; overflow: hidden; }
  &lt;/style&gt;
              </code>
              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;imgList&quot;&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0035.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0038.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0039.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0043.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0044.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0045.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0046.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0047.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/0048.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/2014-04-09.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://public-zangtao.bj.bcebos.com/img/2014-04-10.jpg?responseContentDisposition=attachment&quot; &gt; &lt;/a&gt; &lt;/div&gt;

  &lt;/div&gt;
          </code>
        </pre>
        <pre>
                <code>
  //js
  require.async('photowall',function(photowall){
   photowall({
      $this:$('.imgList'),   //图片列表容器
      items:'.imgItem',      //图片单元
      border:10              //间距，默认10px
      })
   })
                  </code>
          </pre>
         </td>
      </tr>
      <tr id="Scroll-bar（滚动条）">
         <td>scroll-bar</td>
         <td>
            <h5>描述</h5>
            <p>滚动条美化插件，支持横向和纵向、滚动条自动隐藏、样式自定义。</p>
            <h5>多终端</h5>
            <p>移动端自动使用原生</p>
            <h5>注意</h5>
            <p>内容元素不能有可向上传导的margin-top属性，否则会干扰滚动定位。</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>wrap</th>
                <td>包裹元素，默认不指定，将新增div.scroll_c</td>
              </tr>
              <tr>
                <th>monitor</th>
                <td>否监听内容变化(用于多插件协作)，布尔值，默认false</td>
              </tr>
              <tr>
                <th>keyway</th>
                <td>按钮键程，默认30(px)</td>
              </tr>
              <tr>
                <th>width</th>
                <td>滚动条宽度，默认8(px)</td>
              </tr>
              <tr>
                <th>btnLength</th>
                <td>按钮长度，默认0(不显示按钮)</td>
              </tr>
              <tr>
                <th>btnBreadth</th>
                <td>按钮宽度，默认与滚动条同宽</td>
              </tr>
              <tr>
                <th>sliderWidth</th>
                <td>滑块宽度，默认与滚动条同宽</td>
              </tr>
              <tr>
                <th>hideBar</th>
                <td>自动隐藏滚动条，鼠标进入显示，默认false</td>
              </tr>
            </table>

            <h5>示例</h5>
            
         <pre>
            <code>
  &lt;style&gt;
  /*css*/
  .demo{position:relative;overflow:hidden;height:320px;max-width: 480px;margin:10px auto;}
  .demo .scroll_c{background: yellow;}
  .demo .scroll_c img{max-width: none;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo demo1&quot;&gt;
     &lt;img src=&quot;http://temp.im/480x480/&quot;&gt;&lt;br/&gt;
     content conten ontentcontent1&lt;br/&gt;
     content7&lt;br/&gt;
     content conten ontentcontent1&lt;br/&gt;
     content7&lt;br/&gt;
  &lt;/div&gt;
  &lt;div class=&quot;demo demo2&quot;&gt;
     &lt;img src=&quot;http://temp.im/900x320/&quot;&gt;&lt;br/&gt;
  &lt;/div&gt;
          </code>
        </pre>
        <pre>
                <code>
  //js
  require('scroll-bar');
  $('.demo1').scrollBar();
  $('.demo2').scrollBar({
      overflow: "x"
  });
               </code>
          </pre>
         </td>
      </tr>
      <tr id="Scroll-row（垂直滚动列表）">
         <td>scroll-row</td>
         <td>
            <h5>描述</h5>
            <p>垂直方向整行滚动。可以处理多列情况，默认添加内部按钮，
            如果需要外部按钮可以指定自行添加的按钮。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>prev</th>
                <td>指定向上箭头，默认无，将添加 '.arrs .arr_prev'</td>
              </tr>
              <tr>
                <th>next</th>
                <td>指定向下箭头，默认无，将添加 '.arrs .arr_next'</td>
              </tr>
              <tr>
                <th>wrap</th>
                <td>默认ul，指定包裹元素</td>
              </tr>
              <tr>
                <th>cell</th>
                <td>默认li，指定列表元素</td>
              </tr>
              <tr>
                <th>line</th>
                <td>滚动行数</td>
              </tr>
              <tr>
                <th>duration</th>
                <td>滚动时长，默认460，单位ms</td>
              </tr>
              <tr>
                <th>animate</th>
                <td>默认'swing'，动画曲线，来自jquery.easing</td>
              </tr>
              <tr>
                <th>auto</th>
                <td>默认true，自动滚动</td>
              </tr>
              <tr>
                <th>pause</th>
                <td>默认true，自动滚动时是否悬浮暂停</td>
              </tr>
              <tr>
                <th>interval</th>
                <td>自动播放间隔，默认5000，单位ms</td>
              </tr>
              <tr>
                <th>callback</th>
                <td>滚动回调，@param (nowRow) :当前所在页数</td>
              </tr>
              <tr>
                <th>ext</th>
                <td>扩展方法，@param (totalRow) :总页数</td>
              </tr>

            </table>

            <h5>示例</h5>
            
         <pre>
         <code>
  &lt;style&gt;
  .demo { position: relative; width: 320px; height: 22em; overflow: hidden; }
  .demo li{ height: 10em; overflow: hidden; margin-bottom:1em; background:yellow; }
  .demo .arrs{position: absolute; right:0; width:1.5em;height: 1.5em;background: grey;}
  .demo .arr_prev{top:0;}
  .demo .arr_next{top:2em;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;div class=&quot;demo&quot;&gt;
     &lt;ul class=&quot;row&quot;&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/300x300/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/400x400/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/500x500/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/300x300/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/400x400/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/500x500/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/300x300/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/400x400/&quot; /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;myprev&quot;&gt;prev&lt;/div&gt;
  &lt;div class=&quot;mynext&quot;&gt;next&lt;/div&gt;
        </code>
      </pre>
      <pre>
        <code>
  //js
  require('scroll-row');
  $('.demo').scrollrow({
    prev:'.myprev',
    next:'.mynext'
  })
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Scroll（横向滚动）">
         <td>scroll</td>
         <td>
            <h5>描述</h5>
            <p>横向滚动，支持触屏和半响应; 需指定滚动元素(.demo li)宽度和效果容器高度。</p>
            <p><u>内置hero模式</u>，用于全屏轮显焦点图，三张居中轮显。通常该模式的样式为.demo不设宽度(即全屏宽度)，.demo li普通banner宽度(如980px)；</p>
            <p><u>内置unloop模式</u>，不循环滚动，用于做大事记类的时间轴滚动；</p>
            <h5>注意</h5>
            <ol>
              <li>效果自动计算间距("margin-right")，样式设置的右间距将被覆盖，或者作为效果无法运行时的后备样式。</li>
              <li>当显示数+滚动步幅&lt;=元素总数时可用</li>
            </ol>
            <h5>多终端</h5>
            <p>支持</p>
            <p>建议的响应式方案：各终端分别设置scroll-cell宽度，用rect-number方式固定scroll-cell宽高比，元素间距和整体高度都可以适应</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>direct</th>
                <td>自动播放方向，可选left | right</td>
              </tr>
              <tr>
                <th>mode</th>
                <td>模式，默认无，可选 hero(全屏三图滚动) | unloop(不循环)</td>
              </tr>
              <tr>
                <th>num</th>
                <td>滚动个数，默认99，即能显示几个显示几个</td>
              </tr>
              <tr>
                <th>auto</th>
                <td>默认true，自动播放</td>
              </tr>
              <tr>
                <th>interval</th>
                <td>默认5000，单位ms，自动播放间隔</td>
              </tr>
              <tr>
                <th>duration</th>
                <td>默认640，单位ms，单次滚动持续时长</td>
              </tr>
              <tr>
                <th>animate</th>
                <td>默认‘swing’，滚动效果，来自jquery.easing</td>
              </tr>
              <tr>
                <th>step</th>
                <td>默认1，每次滚动个数</td>
              </tr>
              <tr>
                <th>wrap</th>
                <td>默认‘ul’，指定滚动包裹元素</td>
              </tr>
              <tr>
                <th>cell</th>
                <td>默认‘li’，指定滚动元素</td>
              </tr>
              <tr>
                <th>prev</th>
                <td>指定向左按钮，默认无，将添加 '.arrs .arr_prev'</td>
              </tr>
              <tr>
                <th>next</th>
                <td>指定向右按钮，默认无，将添加 '.arrs .arr_next'</td>
              </tr>
              <tr>
                <th>callback</th>
                <td>回调 @param (nowStep)</td>
              </tr>
              <tr>
                <th>ext</th>
                <td>扩展 @param (this, showNumber, allStep)</td>
              </tr>
            </table>

            <h5>示例</h5>

            <pre>
              <code>
  &lt;style&gt;
  .demo {height: 10em; width:32em; display:none;margin-bottom:2em;}
  .demo li {width:10em; background:yellow;}
  .demo .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
  .demo .arr_prev{left:0;}
  .demo .arr_next{right:0;}
  .slide_nav .on{color:#39f;}
  &lt;/style&gt;             
              </code>
              <code>
  &lt;h4&gt;普通模式&lt;/h4&gt;      
  &lt;div class=&quot;demo&quot;&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x301/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x302/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x303/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x304/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x305/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x306/&quot; /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
            </code>
            <code>
  &lt;style&gt;
  .demo-hero { display:none;}
  .demo-hero li {width:980px; background:yellow;}
  .demo-hero .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
  .demo-hero .arr_prev{left:0;}
  .demo-hero .arr_next{right:0;}
  &lt;/style&gt;
          </code>
          <code>
  &lt;h4&gt;hero模式&lt;/h4&gt;  
  &lt;div class=&quot;demo-hero&quot;&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x301/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x302/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x303/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x304/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x305/&quot; /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  &lt;span class=&quot;button myback&quot;&gt;back&lt;/span&gt;&lt;span class=&quot;button myforward&quot;&gt;forward&lt;/span&gt;
          </code>
          </pre>
                  <pre>

                <code>
  //js
  require('scroll');

  $('.demo').scroll();

  $('.demo-hero').scroll({
    mode: 'hero',
    prev: '.myback',
    next: '.myforward'
  })
                </code>
          </pre>
         </td>
      </tr>
      <tr id="Select（下拉框）">
         <td>select</td>
         <td>
            <h5>描述</h5>
            <p>下拉框美化插件，基于原生select标签创建DOM，支持disabled和selected特性，操作DOM会同步原select标签的值。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>注意</h5>
            <ol>
              <li>移动设备不会创建DOM，只支持选中回调</li>
            </ol>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>data</th>
                <td>优先使用此数据初始化，格式见示例</td>
              </tr>
              <tr>
              <tr>
                <th>posi</th>
                <td>下拉方向，默认"bottom"，可选"top"和"auto"，"auto"会计算下拉框距离屏幕上下两端的尺寸，向大的一边展开。</td>
              </tr>
              <tr>
                <th>hideSelected</th>
                <td>默认false，是否隐藏已经选中的项</td>
              </tr>
              <tr>
                <th>hideDisabled</th>
                <td>默认true，是否隐藏不可用的项</td>
              </tr>
              <tr>
                <th>act</th>
                <td>触发动作，可选 click | mouseenter</td>
              </tr>
              <tr>
                <th>hook</th>
                <td>样式钩子，用于自定义皮肤，默认default，生成的类名为：select-ui-choose-hook和select-ui-options-hook，具体样式写法参考select.css中的 /*default skin*/; <b>内置"thin"皮肤，可用于语言选择</b></td>
              </tr>
              <tr>
                <th>callback(value,text)</th>
                <td>选中回调，接收option的value值和text值为参数</td>
              </tr>
            </table>
            <h5>示例</h5>
            
            <pre>
               <code>
  &lt;style&gt;
  .demo, button{display: block; width: 200px; margin:10px;}
  &lt;/style&gt;
  &lt;form id=&quot;test&quot; &gt;
    &lt;!-- 从原生select初始化 --&gt;
    &lt;select class=&quot;demo demo-fromdom&quot; name=&quot;select1&quot;&gt;
      &lt;option disabled&gt;--请选择--&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;山东&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;山西&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;河南&lt;/option&gt;
    &lt;/select&gt;
    &lt;!-- 从数据初始化 --&gt;
    &lt;select class=&quot;demo demo-fromdata&quot; name=&quot;select2&quot;&gt;
      &lt;option disabled&gt;--请选择--&lt;/option&gt;
    &lt;/select&gt;
    
    &lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt;
  &lt;/form&gt;
          </code>
          </pre>
                  <pre>
                <code>
  require('select');
  var dataAjax = [
        {
          "option":"济南",
          "value":"ajax1"
        },{
          "option":"烟台",
          "value":"ajax2",
          "selected":true
        },{
          "option":"青岛",
          "value":"ajax3"
        }
      ];

  $('.demo-fromdom').select({
    callback: function(value, text) { 
      console.log('更改级联select的数据,这里以传data为例，也可以修改dom后重新执行一下select()方法')
      $('select.demo-fromdata').select({
        data: dataAjax
      })
    }
  });

  $('.demo-fromdata').select({
    callback: function(val,txt){
      alert('选中了'+txt)
    }
  })
  //提交测试
  $('#test').on('submit',function(e){
    e.preventDefault();
    alert($(this).serialize())
  })
                  </code>
          </pre>
         </td>
      </tr>
      <tr id="Slide（幻灯片）">
         <td>slide</td>
         <td>
            <h5>描述</h5>
            <p> 幻灯片效果，支持触屏操作，支持图片按需加载。</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>注意</h5>
            <ol>
              <li>默认导航是带序号的a标签，要自定义a标签内容需要指定导航容器并添加<b>"custom"</b>属性:
            &lt;div class=&quot;my_navs&quot; custom&gt; 自己写a标签... &lt;/div&gt;</li>
            </ol>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>wrap</th>
                <td>默认‘ul’，指定包裹元素</td>
              </tr>
              <tr>
                <th>cell</th>
                <td>默认‘li’，指定切换元素</td>
              </tr>
              <tr>
                <th>effect</th>
                <td>切换效果，默认‘slide’，可选slide\fade\toggle</td>
              </tr>
              <tr>
                <th>direction</th>
                <td>slide效果方向 x | y</td>
              </tr>
              <tr>
                <th>animate</th>
                <td>默认‘swing’，动画曲线，来自jquery.easing</td>
              </tr>
              <tr>
                <th>duration</th>
                <td>默认640，动画时长(ms)</td>
              </tr>
              <tr>
                <th>start</th>
                <td>起始帧，默认0，即从第一张开始</td>
              </tr>
              <tr>
                <th>auto</th>
                <td>默认true，自动播放</td>
              </tr>
              <tr>
                <th>pause</th>
                <td>默认true，传入选择器将作为暂停按钮，暂停时添加'pause'类</td>
              </tr>
              <tr>
                <th>interval</th>
                <td>默认5000，自动播放间隔(ms)</td>
              </tr>
              <tr>
                <th>act</th>
                <td>默认‘mouseenter’，导航按钮触发事件 mouseenter | click</td>
              </tr>
              <tr>
                <th>prevHtml</th>
                <td>左箭头html</td>
              </tr>
              <tr>
                <th>nextHtml</th>
                <td>右箭头html</td>
              </tr>
              <tr>
                <th>prev</th>
                <td>指定左箭头，不指定将自动添加'.arrs .arr_prev'</td>
              </tr>
              <tr>
                <th>next</th>
                <td>指定右箭头，不指定将自动添加'.arrs .arr_next'</td>
              </tr>
              <tr>
                <th>navs</th>
                <td>指定自定义导航，不指定将自动添加'.slide_nav'或使用内部存在的.slide_nav;</td>
              </tr>
              <tr>
                <th>imgattr</th>
                <td>默认‘slide-src’，按需加载图片的地址标签，注意不能是‘data-src’</td>
              </tr>
              <tr>
                <th>callback</th>
                <td>回调，@param (效果元素，切换元素，当前帧序号) </td>
              </tr>
              <tr>
                <th>ext</th>
                <td>扩展，@param (效果元素，切换元素，总帧数)</td>
              </tr>
            </table>

            <h5>示例</h5>
            
            <pre>
               <code>
  &lt;style&gt;
  .demo{max-width:1000px;margin:auto;height:0; overflow:hidden; padding-bottom:30%;display:none;}
  .demo li{background: yellow;}
  .demo img{width:100%; height:100%;}
  .demo .slide_nav{left: 0;bottom:0;}
  .demo .slide_nav a{float: left;width: 16px;height: 16px;overflow:hidden;background:#ccc;margin:6px;}
  .demo .slide_nav .on{background:#666;}
  .demo .arrs{position:absolute;padding:1em;margin:.5em;background:#777;color:#fff;
  z-index:9;}
  .demo .arr_prev{left:0;}
  .demo .arr_next{left:4em;}
  &lt;/style&gt;
              </code>
              <code>
  &lt;div class=&quot;demo&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;img src=&quot;http://temp.im/1000x300/&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://temp.im/1000x301/&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://temp.im/1000x302/&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://temp.im/1000x303/&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://temp.im/1000x304/&quot; /&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

        </code>
      </pre>
      <pre>
          <code>
  //js
  require('slide');
  $('.demo').slide();
                  </code>
            </pre>
         </td>
      </tr>
      <tr id="Tab（选项卡）">
         <td>tab</td>
         <td>
            <h5>描述</h5>
            <p>选项卡，标签和选项卡内容可灵活选择，对结构没有限制</p>
            <p>忽略选的项卡：当选项卡标签有"ignore"属性时，该标签将不参与选项卡的互动效果</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>tabs</th>
                <td>tab标签，默认内部查找.tab_t</td>
              </tr>
              <tr>
                <th>conts</th>
                <td>tab内容，默认内部查找.tab_c</td>
              </tr>
              <tr>
                <th>posi_auto</th>
                <td>默认true，标签自动定位</td>
              </tr>
              <tr>
                <th>width_auto</th>
                <td>默认false，标签自适应宽度</td>
              </tr>
              <tr>
                <th>left</th>
                <td>默认0，单位px，第一个标签距左起始位置</td>
              </tr>
              <tr>
                <th>auto</th>
                <td>默认false，是否自动播放</td>
              </tr>
              <tr>
                <th>interval</th>
                <td>默认5000，单位ms，自动播放间隔</td>
              </tr>
              <tr>
                <th>start</th>
                <td>默认0，初始显示第几个</td>
              </tr>
              <tr>
                <th>margin</th>
                <td>默认0，单位px，标签间距</td>
              </tr>
              <tr>
                <th>act</th>
                <td>默认‘click’，触发动作</td>
              </tr>
              <tr>
                <th>callback</th>
                <td>回调方法 @param ($this,$tab_t,index) : 当前对象，标签，当前帧序号</td>
              </tr>
              <tr>
                <th>ext</th>
                <td>扩展方法 @param ($this,$tab_t,opts) : 当前对象，标签，配置</td>
              </tr>
            </table>

            <h5>示例</h5>

            <pre>
            <code>
  &lt;style&gt;
  /*css*/
  .demo{width:480px;}
  .demo .tab_b{text-align:right;background:#ccc;}
  .demo .tab_t{color:#fff;}
  .demo .tab_t_cur{background:#39f;}
  .demo .tab_c{height:200px;border:1px solid #ccc;}
  &lt;/style&gt;
            </code>
            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo&quot;&gt;
     &lt;div class=&quot;tab_b&quot;&gt; 头部自定义内容 &lt;/div&gt;
     &lt;div class=&quot;tab_t&quot;&gt;选项卡一&lt;/div&gt;
     &lt;div class=&quot;tab_c&quot;&gt;
        选项卡一
     &lt;/div&gt;
     &lt;div class=&quot;tab_t&quot;&gt;选项卡二&lt;/div&gt;
     &lt;div class=&quot;tab_c&quot;&gt;
        选项卡二
     &lt;/div&gt;
     &lt;div class=&quot;tab_t&quot; ignore&gt;&lt;a href="http://baidu.com" target="_blank"&gt;忽略选显卡&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
          </code>
        </pre>
        <pre>
                <code>
  //js
  require('tab');
  $('.demo').tab();
               </code>
            </pre>
         </td>
      </tr>
      <tr id="Tip（提示框）">
         <td>tip</td>
         <td>
            <h5>描述</h5>
            <p>提示框插件，支持弹出文本，html，jQuery元素（将清除默认样式）</p>
            <h5>多终端</h5>
            <p>支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>act</th>
                <td>默认‘mouseenter’，触发动作 mouseenter | click</td>
              </tr>
              <tr>
                <th>place</th>
                <td>默认"left-center"，规则[ left | right | top | bottom ]-[ 另一个轴向的两个方向 | center ]-[ in | null ]，前两项必须，表示位置，第三项可省，为"in"时表示从内部定位</td>
              </tr>
              <tr>
                <th>title</th>
                <td>标题文字，默认false，不显示标题栏</td>
              </tr>
              <tr>
                <th>hasarr</th>
                <td>默认true，提示框有无箭头</td>
              </tr>
              <tr>
                <th>offset</th>
                <td>提示框与元素间距，默认0</td>
              </tr>
              <tr>
                <th>type</th>
                <td>默认'auto'，弹出文本内容自带边框dom不带边框，可选'content'，所有元素均自带边框</td>
              </tr>
              <tr>
                <th>modal</th>
                <td>
                   是否带半透明背景，默认false
                </td>
              </tr>
              <tr>
                <th>opacity</th>
                <td>
                  模态背景透明度，默认0.5
                </td>
              </tr>
              <tr>
                <th>hook</th>
                <td>
                  自定义class类名，默认无
                </td>
              </tr>
              <tr>
                <th>show</th>
                <td>
                  立即显示，默认false，若为true将忽略act事件，要用返回值中的hide()方法关闭
                </td>
              </tr>
              <tr>
                <th>onshow</th>
                <td>显示回调方法 @param ($this) : 当前对象</td>
              </tr>
              <tr>
                <th>onhide</th>
                <td>关闭回调方法</td>
              </tr>
            </table>

            <h5>示例</h5>
            
         <pre>
         <code>
  &lt;style&gt;
  /*css*/
  .demo a{margin: 60px;}
  &lt;/style&gt;
         </code>
         <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;wrap demo&quot;&gt;
    &lt;a href=&quot;#1&quot; class=&quot;_tip1 btn btn-default&quot;&gt;左&lt;/a&gt;
    &lt;a href=&quot;#2&quot; class=&quot;_tip2 btn btn-default&quot;&gt;上&lt;/a&gt;
    &lt;a href=&quot;#3&quot; class=&quot;_tip3 btn btn-default&quot;&gt;右&lt;/a&gt;
    &lt;a href=&quot;#4&quot; class=&quot;_tip4 btn btn-default&quot;&gt;下&lt;/a&gt;
  &lt;/div&gt;          
            </code>
        </pre>
         <pre>
         <code>
  //js
  require('tip');
  $('.demo ._tip1').tip( Math.random );
  $('.demo ._tip2').tip( Math.random , {place:'top-center'});
  $('.demo ._tip3').tip( Math.random , {place:'right-center'});
  $('.demo ._tip4').tip( Math.random , {place:'bottom-center'});
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Touch（触屏事件）">
         <td>touch</td>
         <td>
            <h5>jquery.event.move</h5>
            <p>项目主页：http://stephband.info/jquery.event.move/</p>
            <p>事件：movestart、move、moveend</p>
            <p>参数：</p>
            <table class="table table-hover">
               <tr>
                  <td>e.pageX, e.pageY ：</td>
                  <td>触点的页面的坐标</td>
               </tr>
               <tr>
                  <td>e.startX, e.startY ：</td>
                  <td>移动起始点的页面坐标</td>
               </tr>
               <tr>
                  <td>e.distX, e.distY ：</td>
                  <td>与移动起始点的距离</td>
               </tr>
               <tr>
                  <td>e.deltaX, e.deltaY ：</td>
                  <td>与上次移动事件终点的距离</td>
               </tr>
               <tr>
                  <td>e.velocityX, e.velocityY ：</td>
                  <td>移动速度 像素/毫秒, 取最后几次触发的平均值</td>
               </tr>
            </table>
            <h5>jquery.swipe</h5>
            <p>项目主页：http://stephband.info/jquery.event.swipe/</p>
            <p>事件：swipeleft、swiperight、swipeup、swipedow</p>
            <p>参数：</p>
            <table class="table table-hover">
               <tr>
                  <td>e.pageX, e.pageY ：</td>
                  <td>触点的页面的坐标</td>
               </tr>
               <tr>
                  <td>e.startX, e.startY ：</td>
                  <td>移动起始点的页面坐标</td>
               </tr>
               <tr>
                  <td>e.distX, e.distY ：</td>
                  <td>与移动起始点的距离</td>
               </tr>
               <tr>
                  <td>e.velocityX, e.velocityY ：</td>
                  <td>移动速度 像素/毫秒, 取最后几次触发的平均值</td>
               </tr>
            </table>
            <h5>多终端</h5>
            <p>仅移动端</p>
 
            <h5>示例</h5>
            
         <pre>
          <code>
    //move示例：
    $('.demo')
    .bind('move', function(e) {
      $(this).css({ left: e.startX + e.deltaX });
    })
    .bind('moveend', function() {
      alert('moveend');
    });
          </code>
         <code>
    //swipe示例：
    $('.demo')
    .on('swipeleft', function(e) {
      alert('swipeleft');
    })
    .on('swiperight', function(e) {
      alert('swiperight');
    });            
            </code>
          </pre>
         </td>
      </tr>
      <tr id="Transit（css3动画扩展）">
        <td>Transit</td>
        <td>
          <h5>描述</h5>
          <p>封装<a href="http://ricostacruz.com/jquery.transit/" target="_blank">Transit</a>，扩展jquery的css()方法支持css3属性定义，新增$.fn.transition()方法支持css3属性过渡动画。</p>
          <h5>多终端</h5>
          <p>支持</p>
          <h5>示例</h5>
          <pre>
            <code>
  $("#box").css({ x: '30px' });               // Move right
  $("#box").css({ y: '60px' });               // Move down
  $("#box").css({ translate: [60,30] });      // Move right and down
  $("#box").css({ rotate: '30deg' });         // Rotate clockwise
  $("#box").css({ scale: 2 });                // Scale up 2x (200%)
  $("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
  $("#box").css({ skewX: '30deg' });          // Skew horizontally
  $("#box").css({ skewY: '30deg' });          // Skew vertical
  $("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
  $("#box").css({ rotateY: 30 });
  $("#box").css({ rotate3d: [1, 1, 0, 45] });

  $("#box").transition({ opacity: 0.1, scale: 0.3 });
  $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
  $("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
  $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
  $("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
  $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything
            </code>
          </pre>
        </td>
      </tr>
      <tr id="Qr（二维码）">
         <td>qr</td>
         <td>
            <h5>描述</h5>
            <p>生成二维码</p>
            <h5>多终端</h5>
            <p>支持</p>
 
            <h5>示例</h5>
            
            <pre>
            <code>
  &lt;!--html--&gt;
  &lt;button id=&quot;qr_gen&quot;&gt;生成&lt;/button&gt;
  &lt;div id=&quot;qr_container&quot;&gt; &lt;/div&gt;
            </code>
            </pre>
                    <pre>
                <code>
  //js
  var qr = require('qr');
     
  $('#qr_gen').click(function(){

    var qrcode = new qr(document.getElementById("qr_container"), {
      text: "http://www.jerei.com",             // 生成内容
      width: 128,                               // 宽
      height: 128,                              // 高
      colorDark : "#000000",                    // 颜色
      colorLight : "#ffffff",                   // 背景色
      correctLevel : qr.CorrectLevel.H          // 容错级别 L|M|Q|H
    });

    //qrcode.clear();                           // clear the code.
    //qrcode.makeCode("http://naver.com");      // make another code.

  });
               </code>
          </pre>
         </td>
      </tr>
      <tr id="Zoom（图片放大镜）">
         <td>zoom</td>
         <td>
            <h5>描述</h5>
            <p>图片放大镜，大图尺寸自动获取。</p>
            <h5>多终端</h5>
            <p>不支持</p>
            <h5>配置</h5>
            <table class="table table-hover">
              <tr>
                <th>zoomWidth</th>
                <td>大图窗口宽度，默认与目标对象同宽</td>
              </tr>
              <tr>
                <th>zoomHeight</th>
                <td>大图窗口高度，默认与目标对象同高</td>
              </tr>
              <tr>
                <th>zoomScale</th>
                <td>默认0，大图相对小图放大倍数（大于1有效）</td>
              </tr>
              <tr>
                <th>offset</th>
                <td>大图窗口与小图距离，默认10，单位px</td>
              </tr>
              <tr>
                <th>offsetTarget</th>
                <td>大图定位目标，默认无，将相对目标元素定位</td>
              </tr>
              <tr>
                <th>position</th>
                <td>大图相对小图方位，默认right</td>
              </tr>
              <tr>
                <th>preload</th>
                <td>默认true，预加载大图，小图动态切换的情况只对第一张有效</td>
              </tr>
            </table>

            <h5>示例</h5>
            
            <pre>
              <code>
  &lt;!--html--&gt;
  &lt;style&gt;
  .demo{width:400px;height:320px;line-height: 320px; text-align:center;background:#eee;}
  .demo img{display: inline-block;vertical-align: middle;}
  &lt;/style&gt;
  &lt;div class=&quot;demo&quot;&gt;
     &lt;img src=&quot;http://temp.im/320x240/&quot; zoom=&quot;http://temp.im/640x480/&quot;  /&gt;
  &lt;/div&gt;
                  </code>
                </pre>
                <pre>
                <code>
  // JS
  require('zoom');
  $('.demo').zoom()
                </code>
          </pre>
         </td>
      </tr>
   </table>
   
   <h3 id="js-base">base</h3>
   <p>除jquery以外，base.js另外提供以下方法：</p>
   <table class="table table-bordered js-base-table">
      <tr>
         <td>browser</td>
         <td>
          <p>浏览器信息：</p>
          <table class="table table-hover">
            <tr>
              <th>browser.isMobile:</th>
              <td>[boolean]是否移动设备 </td>
            </tr>
            <tr>
              <th>browser.isIE6:</th>
              <td>[boolean]是否IE6</td>
            </tr>
            <tr>
              <th>browser.ie:</th>
              <td>[number]返回ie版本，ie11及以上和非ie返回0</td>
            </tr>
            <tr>
              <th>browser.platform:</th>
              <td>[string]浏览器运行平台</td>
            </tr>
            <tr>
              <th>browser.agent:</th>
              <td>[string]浏览器用户代理头信息</td>
            </tr>
            <tr>
              <th>browser.support3d:</th>
              <td>[boolean]是否支持3d转换</td>
            </tr>
          </table>
         </td>
      </tr>
      <tr>
         <td>base.getStyle(ele,attr)</td>
         <td>获取元素的属性值，ele：元素；attr：要获取的属性，返回属性值</td>
      </tr>
      <tr>
         <td>$.cookie(name,value)</td>
         <td>操作cookie，name：键名；value：设置为的值，一个参数取值，返回value，两个参数赋值，无返回值</td>
      </tr>
      <tr>
         <td>base.toload(url, pageSize, param, callback)</td>
         <td>
           <p>通用分页加载，param用于向处理页传递参数，自动生成递增页码随参数发送（自定义参数中不得有"page"和"size"键）。</p>
           <p></p>
        <pre>
        <code>
  /*
  * @请求地址(string)
  * @请求条数(number)
  * @请求参数(object)
  * @回调(function)
  * 服务器返回值(json):含有status且值为'ok'视为正常，否则报错
  */

  base.toload('/test/ajax.php', 5, {"test":"test info!"}, function(data){ 
      $('body').append(data);
    });

  // 服务器端将接收到的参数为：
  {
    "test" : "test info!",
    "page" : 0,           //从0开始，每次+1
    "size" : 5
  }

  //服务器端需要返回的数据为：
  {
    "status" : "ok",
    "data" : {...}  // status以外的数据无特别要求
  }

            </code>
          </pre>
         </td>
      </tr>
      <tr>
         <td>base.throttle(fn, delay, duration)</td>
         <td>
            <p>函数节流，用于过滤resize，mousemove，scroll这类频连续繁触发事件</p>
          <pre>
            <code>
  /*
  * @fn：要执行的事件函数
  * @delay: 小间隔(delay)内连续触发的事件将被屏蔽，默认64ms
  * @duration: 大间隔(duration)内至少执行一次事件，默认640ms
  * return：节流后的函数
  */

  // 查看控制台，IE效果更明显
  var thro = base.throttle(function(){
        console.log('thro resize')
      });

  $(window).resize(function(){
    thro();
  })  
            </code>
          </pre>
         </td>
      </tr>
      <tr>
         <td>base.getUrlParam(name,url)</td>
         <td>
         <p>获取url参数。</p>
          <pre>
            <code>
  /*
  * @name：要获取的键
  * @url：可选，要检索的url
  */

  // url
  http://localhost:8001/resources/web/pro-list.htm?cat_id=2643

  // js
  console.log(base.getUrlParam('cat_id'));                // 输出 2643
  console.log(base.getUrlParam('cat_id','http://localhost:8001/resources/web/pro-list.htm?cat_id=2643'));  // 输出 2643
            </code>
          </pre>
         </td>
      </tr>
      <tr>
        <td>jquery.placeholder</td>
        <td>
          <p>集成<a href="https://github.com/mathiasbynens/jquery-placeholder" target="_blank">jquery.placeholder</a>，common.js中默认应用，与之配合的.placeholder类已加入style.css#baseUI中。</p>
          <pre>
            <code>
  //js
  $('input, textarea').placeholder();
            </code>
            <code>
  /*css*/
  .placeholder { color: #aaa; }
            </code>
          </pre>
        </td>
      </tr>
      <tr>
         <td>getType(callback)</td>
         <td>
            <p>获取当前屏幕类型，回调函数可选，当无回调时返回字符串('Pc','Pad','Mobile')，有回调时回调接受返回字符串为参数：</p>
         <pre>
         <code>
   var base=require('base');
   
   //无回调
   var _type=base.getType();      //"Pc" || "Pad" || "Mobile"
   
   //有回调
   base.getType(function(type){
      alert(type);                //"Pc" || "Pad" || "Mobile"
   })
   
            </code>
</pre>
         </td>
      </tr>
      <tr>
         <td>getOrient(callback)</td>
         <td>
            <p>获取移动设备屏幕方向，回调函数可选，当无回调时返回字符串('Heng','Shu')，有回调时回调接受返回字符串为参数：</p>
            <pre>
            <code>
   var base=require('base');
   
   //无回调
   var _orient=base.getOrient();// "Heng" || "Shu"
   
   //有回调
   base.getOrient(function(orient){
      alert(orient);// "Heng" || "Shu"
   })
                </code>
</pre>
            <p>默认会监听设备横竖屏切换事件，给body添加对应class名，源码：</p>
            <pre>
            <code>
  $( window ).bind("orientationchange", function( event ) { 
    $('body').removeClass('Heng Shu').addClass(_getOrient())
  }); 
    </code>
</pre>
         </td>
      </tr>
      <tr>
         <td>base.resImg(bigSrc)</td>
         <td>
          <p>响应式图片方法，common.js默认调用。bigSrc传入存放大图地址的自定义属性，可省，默认"data-src"；</p>
          <p>src是手机端图片地址，"data-src"是pc和pad端图片地址，非手机端访问时会将src改成data-src中的地址，如：</p>
         <pre>
         <code>
  &lt;img src=&quot;small.jpg&quot; data-src=&quot;big.jpg&quot; /&gt; 
           </code>
  </pre>
         </td>
      </tr>
   </table>
</section>

<section class="wrap" id="patch">
   <h2>解决方案</h2>
   <h3 id="wei">微画册</h3>
   <h4>UI</h4>
   <h5>翻页效果</h5>
   <p>...</p>
   <h5>animate.css</h5>
   <p>...</p>
   <h5>组件</h5>
   <p>...</p>
   <h4>JS</h4>
   <h5>擦除</h5>
   <p>...</p>
   <h5>组件</h5>
   <p>...</p>
   <h5>事件</h5>
   <p>...</p>
   <h5>懒加载</h5>
   <p>...</p>
   <h3 id="mobileFixed">移动端屏幕适配</h3>
   <p>约定设计稿宽度：手机界面640px，pad界面1024px。</p>
   <p>基于以上约定，通过vw单位将html字号（rem）设置为100px，因为vw单位的特性，使rem对屏幕宽度具有适应性，凡是使用rem为单位的尺寸/字号都将随屏幕宽度自动缩放，例如：</p>
   <pre>
     <code>
  &lt;style&gt;
    .test{width: 3.2rem;height:3.2rem;background:yellow;}
  &lt;/style&gt;
  &lt;div class=&quot;test&quot;&gt;
    &lt;p&gt;在任何手机上都显示为宽度50%（3.2rem）的正方形&lt;/p&gt;
    &lt;p style=&quot;font-size:.28rem&quot;&gt;字号.28rem的文字&lt;/p&gt;
  &lt;/div&gt;
     </code>
   </pre>
  <h3 id="DemandRendering">页面按需渲染</h3>
   <h4>延迟显示</h4>
   <p>透明隐藏类 ：".opc0"，将元素透明，documentReady后显示，用于隐藏局部或整个页面的渲染过程</p>
   <pre>
     <code>
       &lt;div class=&quot;opc0&quot;&gt;
        这里的内容会在documentReady后显示
       &lt;/div&gt;
     </code>
   </pre>
   <h4>延迟渲染</h4>
   <h5>base.topush(dom,callback)</h5>
   <p>textarea标签具有value值不参与页面渲染的特性，因此是一个天然的缓存容器，可以用来暂存一些不需要第一时间显示的页面片段，在需要的时候再用js取出来丢到文档中去，例如：</p>
   <pre>
     <code>
   &lt;!--textarea暂存页面片段的例子--&gt;
   &lt;div class=&quot;demo topush&quot;&gt;
      &lt;textarea class=&quot;hide&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
      &lt;/textarea&gt;
   &lt;/div&gt;
      </code>
      <code>
   &lt;!--textarea发起Ajax的例子--&gt;
   &lt;div class=&quot;demo topush&quot;&gt;
      &lt;textarea class=&quot;hide&quot; data-url=&quot;/test/ajax.php&quot;&gt; &lt;/textarea&gt;
   &lt;/div&gt;
      </code>
   </pre>
   <p>base.topush(dom,callback)就是专门用来取出暂存在textarea标签里的html片段(或发起Ajax)，并放到外层元素中去，两个参数分别是指定外层元素和回调函数，均为可选，外层元素默认".topush"，callback默认无。</p>
   <p>加载后的dom会添加‘pushed’类。</p>
   <p>示例：</p>
  <pre>
      <code>
   //无参数，显示所有".topush"中的textarea暂存元素
   base.topush();  
   
   //传入回调                  
   base.topush(function(e){           
      console.log(e.attr('class'))//"topush ..."
   });
   
   //传入目标选择器                 
   base.topush('.demo');
   
   //传入两个参数时，第一个参数指定要处理的元素，第二个参数为回调函数
   base.topush('.demo',function(e){    
      console.log(e.html())//.demo 渲染后的html
   });     
      </code>
</pre>
  <h4>内置按需渲染策略</h4>
  <h5>base.scanpush()</h5>
  <p>base.scanpush()方法会扫描页面上的延迟渲染标记，并按照预制规则进行渲染。</p>
  <p>预置的四个按需渲染类是：".PcPush",".UnpcPush",".MobilePush",".UnmobilePush",
  分别代表“只有Pc渲染”，“只有Pc不渲染”，“只有手机渲染”，“只有手机不渲染”,渲染完成后会分别触发$('body')的同名事件，用$('body').on()可以捕捉到。</p>
  <p>并且这四个类下的textarea将自动隐藏，不需要手动加隐藏类。</p>
  <p>示例：</p>
            <pre>
            <code>
  &lt;!-- html --&gt;
 &lt;div class=&quot;PcPush&quot;&gt;
    &lt;textarea&gt;
       只在Pc显示
    &lt;/textarea&gt;
 &lt;/div&gt;
 
 &lt;div class=&quot;UnmobilePush&quot;&gt;
    &lt;textarea&gt;
       除了手机都显示
    &lt;/textarea&gt;
 &lt;/div&gt;
               </code>
               <code>
  //js

  $('body').on('PcPush',function(){
    console.log( 'PcPush已经被渲染了' )
  })
  $('body').on('UnmobilePush',function(){
    console.log( '.UnmobilePush已经被渲染了' )
  })

  base.scanpush();
  
               </code>
        </pre>
  <h3 id="instantclick">页面预加载</h3>
  <p>整合<a href="http://instantclick.io" target="_blank">instantclick</a>插件，实现链接预加载、无刷新切换（PJAX）、加载进度条等特性，并扩展了页面切换后记住滚动位置的功能，<a href="../web/index-p1.htm" target="_blank">测试页面</a>。</p>
  <h4>使用</h4>
  <p>为保持js模块化开发体验，需要结合特定模板使用（/resources/web/index-p1.htm），
    模板页中已经对框架文件做了不重复加载处理。页面底部不同于普通模板调用一个js启动模块，而是统一调用common_pjax这个模块，并在回调里加载依赖，写页面代码。</p>
    <p>这是因为PJAX方式切换页面本质上页面没有真的切换，只是body的内容被替换了，这导致seajs不能正常处理新页面的依赖请求，因此使用common_pjax作为代理模块，它在回调中输出常用模块（jquery、base...）、公用代码（init）和模块加载方法（req），这样就在回调中模拟了一个与js启动模块很相似的开发环境，唯一的不同是代理模块提供的req方法只能是异步加载(require.async)。</p>
    <p>插件调用格式只有一种：</p>
    <pre>
      <code>
      require('moduleName', function(){ 
        //do something
      })
      </code>
    </pre>
    <p>同时依赖多个模块可以这样写：</p>
    <pre>
      <code>
        require(['module1','module2'], function(){ 
          //do something
        })
      </code>
    </pre>
    <p>另外，页面中所有的资源路径（包括图片）必须是绝对路径，因为相对路径全部是相对于着陆页而言的，当跳转路径跨层级时相对路径会报错。</p>
    <p>PJAX切换模式还会导致某些插件表现异常，比如mmenu.js点击后不收回，需要做如下配置<code> { onClick:{ close:true}}</code></p>
    <h4>黑名单</h4>
    <p>这几种情况下的a标签不会触发预加载和pjax切换：</p>
    <ol>
      <li>具有"target"或"download"或"data-no-instant"属性；</li>
      <li>指向不同的域；</li>
      <li>指向"#"或"#"开头的地址</li>
    </ol>
    <h4>记住滚动位置</h4>
    <p>当href地址中含有<b>"scrollfixed"</b>参数时，切换后会记住当前的页面滚动位置：</p>
    <pre>
      <code>
        &lt;a href=&quot;/test/test.htm?scrollfixed=1&quot;&gt;
      </code>
    </pre>
   <h3 id="jscatch">js模块本地缓存</h3>
   <p>使用seajs-localcache插件实现manifest功能，公用模块在第一次请求后会缓存到localstorage中，通过modules/manifest.js控制各模块版本，默认版本号1，改动后依次累加，或写成日期格式便于追踪。</p>
   <pre>
     <code>
  /*
  * manifest.js
  */
  define('manifest',function(){
    var mod = {
        'album/album'                   : 1,  //修改版本号更新对应的插件缓存
        'hook/hook'                     : 1,
        'jquery/1/jquery'               : 1,
        'jquery/2/jquery'               : 1,
        'My97DatePicker/WdatePicker'    : 1
        //...
        }
    //...
  })
     </code>
   </pre>
   <h3 id="ajaxcombo">AJAX合并</h3>
   <h5>base.ajaxCombo(data, mark, duration)</h5>
   <p>合并get方式的ajax请求，用于需要同时发起多次ajax的场景，减少请求数。</p>
    <p>具有合并请求标记并且url相同的请求会被合并，参数会被收集进一个对象数组，通过paramArray参数传递。</p>
    <p>注：暂不可用，后端尚未开发。</p>
    <pre>
      <code>
  /*
   * 参数
   * @data: 合并后的附加参数，默认{}
   * @mark: 需要合并请求的标记参数，具有该参数的请求会参与合并，默认'comboAjax'
   * @duration: 合并后的请求发起间隔，默认160(ms)
   */
  base.ajaxCombo(data, mark, duration);

  $.ajax({
    url: "/test/data.json",
    data: {
      method: 'a',
      id: "1",
      comboAjax: true
    }
  })

  $.ajax({
    url: "/test/data.json",
    data: {
      method: 'b',
      id: "224",
      comboAjax: true
    }
  })

  //如上两个请求会被合并为
  $.ajax({
    url: "/test/data.json",
    data: {
      paramArray: [{
        method: 'a',
        id: "1",
        comboAjax: true
      }, {
        method: 'b',
        id: "224",
        comboAjax: true
      }]
    }
  })

      </code>
    </pre>
</section>
<footer class="wrap oh tc">
   <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
   <figure></figure>
</a>
<p class="dib"> © 2014 - 3014  zangtao@jerei.com<br>
Acknowledgements : seajs \ bootstrap \ foundation \ ... </p>
</div>
</footer>
</body>
<script src="/resources/modules/seajs/sea.js" id="seajs-node"></script>
<script src="/resources/Doc/seajs.config.js"></script>
<script>
seajs.use('/resources/Doc/resets/doc')
</script>
</html>